「JavaScript」createTextNodeメソッドでテキストノードを作成するサンプル
環境
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」をテキストノードに入れます。