fetchで取得したデータの文字化け

ご教授よろしくお願いします。
opne trivia という様々なクイズが保存されているDBからAPIを使用してデータを取得し、出力するという簡単なアプリを作成しようとしています。
現在以下のように文字化けが発生しています。

js
1Madonna&#039;s song &quot;Hung Up&quot; includes a piece from which popular 70s song?

該当部分のjavascriptのソースコードは

js
1const makeQuiz = (quizInstance, index) => {
2  titleElement.textContent = `問題${index}`;
3  questionElement.textContent = `【クイズ】${quizInstance.getQuizQuestion(
4    index
5  )}`;
6  quizCategory.textContent = `【ジャンル】${quizInstance.getQuizCategory(
7    index
8  )}`;
9  quizDifficult.textContent = `【難易度】${quizInstance.getQuizDifficulty(
10    index
11  )}`;

です。
試したこととして、textContentをinnerHTMLに変更することで文字化けを直すことができるというのは調べたら出てきたのですが、なぜ直すことができるのかがわからないです。あと、ほかにも文字化けを直す方法があれば教えていただきたいです。

一応javascriptのすべてのコードを載せておきます

js
1const API_URL = "https://opentdb.com/api.php?amount=10";
2const startButton = document.getElementById("startbtn");
3const titleElement = document.getElementById("title");
4const questionElement = document.getElementById("text");
5const quizCategory = document.getElementById("category");
6const quizDifficult = document.getElementById("difficulty");
7const quizList = document.getElementById("quizList");
8
9class Quiz {
10  constructor(quizData) {
11    this._quizzes = quizData.results;
12    this._corrextAnswerNum = 0;
13  }
14  /**
15   *クイズのカテゴリーを取得
16   * @memberof Quiz
17   */
18  getQuizCategory(index) {
19    return this._quizzes[index - 1].category;
20  }
21
22  /**
23   *クイズの難易度を取得
24   * @memberof Quiz
25   */
26  getQuizDifficulty(index) {
27    return this._quizzes[index - 1].difficulty;
28  }
29  /**
30   *クイズの問題を取得
31   * @memberof Quiz
32   */
33  getQuizQuestion(index) {
34    return this._quizzes[index - 1].question;
35  }
36  /**
37   *クイズの数を取得
38   * @memberof Quiz
39   */
40  getNumQuiz() {
41    return this._quizzes.length;
42  }
43  /**
44   *クイズの答えを取得
45   * @memberof Quiz
46   */
47  getQuizAnswer(index) {
48    return this._quizzes[index - 1].correct_answer;
49  }
50  /**
51   *クイズの間違っている回答を取得
52   * @memberof Quiz
53   */
54  /**
55   *正答数を数える
56   * @memberof Quiz
57   */
58  getIncorrectAnswer(index) {
59    return this._quizzes[index - 1].incorrect_answers;
60  }
61  getCorrectAnswer(index, answer) {
62    const CorrectAnswer = this._quizzes[index - 1].correct_answer;
63    if (answer === CorrectAnswer) {
64      return this._corrextAnswerNum++;
65    }
66  }
67  /**
68   *正答数を取得
69   * @memberof Quiz
70   */
71  GetCorrectAnswerNum() {
72    return this._corrextAnswerNum;
73  }
74}
75
76startButton.addEventListener("click", () => {
77  startButton.hidden = true;
78  fetchQuizData(1);
79});
80
81/**
82 *クイズのデータをURLから取得する処理
83 * @param {*} index
84 */
85const fetchQuizData = async (index) => {
86  titleElement.textContent = "取得中";
87  questionElement.textContent = "少々お待ち下さい";
88
89  const response = await fetch(API_URL);
90  const quizData = await response.json();
91  const quizInstance = new Quiz(quizData);
92  makeQuiz(quizInstance, index);
93  console.log(quizInstance);
94};
95
96/**
97 *クイズを作成する処理
98 * @param {*Quizの結果が入っている変数} quizInstance
99 * @param {*} index
100 */
101const makeQuiz = (quizInstance, index) => {
102  titleElement.textContent = `問題${index}`;
103  questionElement.textContent = `【クイズ】${quizInstance.getQuizQuestion(
104    index
105  )}`;
106  quizCategory.textContent = `【ジャンル】${quizInstance.getQuizCategory(
107    index
108  )}`;
109  quizDifficult.textContent = `【難易度】${quizInstance.getQuizDifficulty(
110    index
111  )}`;
112
113  const answers = quizAnswer(quizInstance, index);
114
115  answers.forEach((answer) => {
116    const buttonList = document.createElement("li");
117    quizList.appendChild(buttonList);
118    const buttonElement = document.createElement("button");
119    buttonElement.innerHTML = answer;
120    buttonList.appendChild(buttonElement);
121
122    buttonElement.addEventListener("click", () => {
123      quizInstance.getCorrectAnswer(index, answer);
124      index++;
125      quizList.textContent = "";
126      setNextQuiz(quizInstance, index);
127    });
128  });
129};
130
131/**
132 *クイズを終了させる処理
133 * @param {*} quizInstance
134 */
135const finishQuiz = (quizInstance) => {
136  titleElement.textContent = `あなたの正答数は${quizInstance.GetCorrectAnswerNum()}です!!`;
137  questionElement.textContent = "再度チャレンジしたい場合は以下をクリック!!";
138  quizCategory.textContent = "";
139  quizDifficult.textContent = "";
140  const homeButton = document.createElement("button");
141  homeButton.textContent = "ホームに戻る";
142  homeButton.addEventListener("click", () => {
143    location.reload();
144  });
145
146  quizList.appendChild(homeButton);
147};
148
149/**
150 *クイズを終了するか継続するかを判断する処理
151 * @param {*} quizInstance
152 * @param {*} index
153 */
154const setNextQuiz = (quizInstance, index) => {
155  if (index <= quizInstance.getNumQuiz()) {
156    makeQuiz(quizInstance, index);
157  } else {
158    finishQuiz(quizInstance);
159  }
160};
161
162/**
163 *クイズの回答の選択肢をランダムで表示させる処理
164 * @param {*} [...array]
165 * @return {*}
166 */
167const shuffleQuiz = ([...array]) => {
168  for (let i = array.length - 1; i >= 0; i--) {
169    const j = Math.floor(Math.random() * (i + 1));
170    [array[i], array[j]] = [array[j], array[i]];
171  }
172  return array;
173};
174
175/**
176 *クイズの回答を一つの配列にまとめる処理
177 * @param {*} quizInstance
178 * @param {*} index
179 */
180const quizAnswer = (quizInstance, index) => {
181  const answers = [
182    quizInstance.getQuizAnswer(index),
183    ...quizInstance.getIncorrectAnswer(index),
184  ];
185  return shuffleQuiz(answers);
186};