「JavaScript」createTextNodeメソッドでテキストノードを作成するサンプル

2022年10月3日

環境
Windows 10 Home 64bit
Google Chrome 106.0.5249.62

関数
1.createTextNodeメソッド
変数 = document.createTextNode(文字);
引数は、文字を指定します。
戻り値はテキストノードです。
新しい Text ノードを生成します。このメソッドは HTML 文字をエスケープするのに利用できます。

2.appendChildメソッド
要素.appendChild(子ノード);
子ノードを追加します。
appendChild() は Node インターフェイスのメソッドで、指定された親ノードの子ノードリストの末尾にノードを追加します。

使用例

<!DOCTYPE html>
<html>
<body>

<script>
function addTxtNode(text) {
   //Textノード作成
    var resTxt = document.createTextNode(text);
    //cft要素取得
   cft = document.getElementById("cft");
   //子ノードを追加
   cft.appendChild(resTxt);
}
</script>

 <button onclick="addTxtNode('TOKYO');">都市</button>
 <button onclick="addTxtNode(' YAMADA');">名前</button>
 <button onclick="addTxtNode(' 21');"> 年齢</button>
 <hr />
 
 <p id="cft">情報:</p>
</body>
</html>

実行結果

「都市」を押すと、「TOKYO」をテキストノードに入れます
「名前」を押すと、「 YAMADA」をテキストノードに入れます。
「年齢」を押すと、「 21」をテキストノードに入れます。

JavaScript

Posted by arkgame

関連投稿: