レッスンに戻る

createTextNodeとinnerHTMLとtextContent

重要度:5

空のDOM要素elemと文字列textがあります。

次の3つのうち、完全に同じ処理を実行するコマンドはどれですか?

  1. elem.append(document.createTextNode(text))
  2. elem.innerHTML = text
  3. elem.textContent = text

答え: 1と3

どちらのコマンドもtextelemに「テキストとして」追加します。

例を以下に示します。

<div id="elem1"></div>
<div id="elem2"></div>
<div id="elem3"></div>
<script>
  let text = '<b>text</b>';

  elem1.append(document.createTextNode(text));
  elem2.innerHTML = text;
  elem3.textContent = text;
</script>