JavaScript

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】」で詳しく解説しています。


ウェブつくを支えてくれるスポンサー

  • この記事を書いた人
ウェブつく管理人

ウェブつく管理人

WEB制作の仕事をしています。より簡潔に、より分かりやすく解説していきたいと思い、サイトを運営しています。「読むのが苦にならないサイト」を目指しています。よろしくお願いします。

-JavaScript

© 2020 ウェブつく Powered by AFFINGER5