createTextNode vs innerHTML vs textContent
私たちはこのオープンソースプロジェクトを世界中の人々に提供したいと考えています。このチュートリアルの内容をあなたが知っている言語に翻訳するのを手伝ってください。
購入するEPUB/PDF
チュートリアルマップ
レッスンに戻る

createTextNode vs innerHTML vs textContent

重要性: 5

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

これら3つのどのコマンドが正確に同じことをするでしょうか？

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

答え: 1 and 3.

両方のコマンドは elem へ “テキストとして” text を追加します。

例:

<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>