HTML
 Computer >> コンピューター >  >> プログラミング >> HTML

HTML DOMのcreateTextNode()メソッドとは？使い方をサンプルコードで解説

HTML DOMのcreateTextNode()メソッドは、指定したテキストを持つテキストノードを新しく作成するために使用されるメソッドです。動的にHTML要素へテキストを追加したい場合に活用できます。

サンプルコード

以下は、createTextNode()メソッドを使用した具体的な例です。

<!DOCTYPE html>
<html>
<body>
<h2>createTextNode()のサンプル</h2>
<p>下のボタンをクリックすると、テキスト付きのp要素が生成されます。</p>
<button onclick="createText()">CREATE</button>
<script>
    function createText() {
        var x = document.createElement("P");
        var p = document.createTextNode("createTextNode()で作成されたサンプル段落です");
        x.appendChild(p);
        document.body.appendChild(x);
    }
</script>
</body>
</html>

実行結果

上記のコードを実行すると、次のような画面が表示されます。

HTML DOMのcreateTextNode()メソッドとは？使い方をサンプルコードで解説

CREATEボタンをクリックすると、以下のように新しい段落が追加されます。

HTML DOMのcreateTextNode()メソッドとは？使い方をサンプルコードで解説

コードの解説

このサンプルの処理の流れを順番に見ていきましょう。

1. ボタンの設置

まず、クリックされるとcreateText()関数を実行するCREATEボタンを作成しています。

<button onclick="createText()">CREATE</button>

2. 要素とテキストノードの作成

createText()関数内では、まずdocumentオブジェクトのcreateElement()メソッドを使って<p>要素を生成し、変数xに代入します。続いて、createTextNode()メソッドでテキストノードを作成し、変数pに代入します。

3. ノードの追加

appendChild()メソッドを使って、テキストノードを<p>要素に追加します。最後に、document.bodyのappendChild()メソッドで、テキストノードを含んだ<p>要素をドキュメント全体に追加します。

function createText() {
    var x = document.createElement("P");
    var p = document.createTextNode("createTextNode()で作成されたサンプル段落です");
    x.appendChild(p);
    document.body.appendChild(x);
}

まとめ

createTextNode()メソッドは、createElement()で作成した要素にテキストを動的に挿入する際に不可欠なメソッドです。createElement()で要素を作成し、createTextNode()でテキストノードを作成し、appendChild()で組み合わせる、という流れを覚えておくと、DOM操作がスムーズに行えるようになります。

  1. HTML DOM writeln()メソッドの使い方を徹底解説！サンプルコード付き

    HTML DOM の writeln() メソッドは、複数の式（HTML や JavaScript）をドキュメントに直接書き込むための機能を提供します。注意： このメソッドは、ドキュメント内に既存の HTML コードがある場合、それを上書きします。また、渡された引数はそれぞれ新しい行に追加される点が特徴です。構文writeln() メソッドの基本的な構文は以下の通りです。document.writeln(argument1, argument2, ...)カンマで区切ることで、複数の引数（文字列や HTML 要素など）を一度に渡すことができます。各引数は改行されて出力されます。writeln(

  2. HTML DOM write()メソッドとは?構文と使い方を実例で解説

    HTML DOM の write() メソッドは、HTML や JavaScript などの複数の式をドキュメントに直接書き出すための機能です。ページの読み込み時に動的にコンテンツを生成したり、別ウィンドウへメッセージを出力したりする場面で活用されます。注意: このメソッドには重要な特徴が2つあります。ひとつは、ドキュメント内にすでに HTML コードが存在する場合、それを上書きしてしまうという点。もうひとつは、引数を渡しても自動的には改行されず、そのまま連結されるという点です。用途によっては意図しない表示になることがあるため、挙動を理解した上で使うことが大切です。構文write() メソッド