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

Question

前提・実現したいこと

ご教授お願いします。
opne trivia という様々なクイズが保存されているDBからAPIを使用してデータを取得し、HTMLにて
出力するという簡単なアプリを作成しようとしています。

発生している問題・エラーメッセージ

取得したJsonデータをHTMLにて出力する際に文字化けを起こしてしまいます。

Which artist’s studio was known as 'The Factory'?

該当のソースコード

const startBtn = document.getElementById('start');
const topContent = document.getElementById('topContent');
const center = document.getElementById('centerContent');
const down = document.getElementById('downContent');
const header = document.getElementById('header');
const content = document.getElementById('content');
let questionData;

startBtn.addEventListener('click', () => {
  waitingPage();
  startBtn.remove();
  asynchronousFunc().then(questionPage);

});

const asynchronousFunc = () => {
  return new Promise((resolve, reject) => {
    fetch('https://opentdb.com/api.php?amount=10')
      .then(response => response.json())
      .then(data => {
        questionData = data;
        resolve();
      })
  });
}

const waitingPage = () => {
  header.innerText = '取得中';
  content.innerText = '少々お待ちください';
}

const questionPage = () => {
  header.innerText = '問題1';
  createCategory();
  createLevel();
  createQuestion();
}

const createCategory = () => {
  const category = questionData.results[0].category;
  const genre = document.createElement('h3');
  const genreContent = document.createTextNode('[ジャンル] ' + category);
  genre.appendChild(genreContent);
  topContent.appendChild(genre);
}

const createLevel = () => {
  const difficulty = questionData.results[0].difficulty;
  const level = document.createElement('h3');
  const levelContent = document.createTextNode('[難易度] ' + difficulty);
  level.appendChild(levelContent);
  topContent.appendChild(level);
}

const createQuestion = () => {
  const question = questionData.results[0].question;
  content.innerText = question;
}

試したこと

fetchにてデータを取得した際の文字コードに問題があるのかと思い、fetchのオプジョンにて
headers: {
'Content-Type': 'application/json; charset=utf-8'
}
と指定してみましたが、通信自体ができなくなりました。

Answer 1

’ ' は文字化けではなく、実態参照です。
HTML中にそのまま書き込めば表示されるのですが、createQuestion内で、innerTextにセットしているため、テキストとして表示されてしまっています。
content.innerHTML に値をセットすることでうまく表示できると思います。

        const createQuestion = () => {
        const question = questionData.results[0].question;
        content.innerHTML = question;  // innertTextからinnerHTMLに変更
        }        

Comments

[zoetti]

ご質問よろしいでしょうか？
innerHTMLを使用した場合にセキュリティリスクが発生する可能性はありますでしょうか？