createTextNodeの使い方・デモ【JavaScript】

この記事では、JavaScriptのcreateTextNode()の使い方を解説します。

createTextNode()を使ったデモも紹介します。

createTextNode()とは？使い方は？

createTextNode()は「タグ以外の文字データ」を追加するのに主に使います。

document.createTextNode(文字列)という形式で使われ、Textノードが生成されます。

createTextNode()を使ったデモ

デモ

「追加ボタン」をクリックすると、テキストが追加されます。

「追加されました。」という文字列をcreateTextNode()を使って生成し、appendChild()によって末尾に追加しています。

サンプルコード

とてもシンプルです。

function addText() {
  var text = '追加されました。';
  var add_text = document.createTextNode(text);
  document.getElementById('a').appendChild(add_text);
}

<div id="a">div要素です。</div>
<button onclick="addText()">追加</button>

appendChild()がポイントですね。

appendChild()については「appendChild()の使い方とデモ【JavaScript】」で詳しく解説しています。

また、特定の要素の直前に追加するinsertBefore()を使うことも可能です。

insertBefore()については「insertBefore()の使い方とデモ【JavaScript】」で詳しく解説しています。