「JavaScript」createTextNodeメソッドで要素に設定するテキストを作成する
環境
Google Chrome 102.0.5005.63
書式
1.p要素を作成
var 変数名1= document.createElement(“p");
新たに要素を作成します。
2.テキストノードを作成します
var 変数名2 = document.createTextNode(“内容");
要素に設定するテキストを作成します。
3.pタグ要素にテキストノードを追加
変数名1.appendChild(変数名2);
使用例
<!DOCTYPE html> <html> <body> <div id="cft">test abc</div> <br> <button>検証</button> <script> function funA() { // 追加先のdiv要素取得 var cft = document.getElementById("cft"); // pタグ要素を作成 var ptag= document.createElement("p"); // pタグ要素に内容を追加 var txtNode = document.createTextNode("study skill"); // pタグ要素にテキストノードを追加 ptag.appendChild(txtNode); // DOMにpタグ要素を追加 cft.appendChild(ptag); } </script> </body> </html>
実行結果
「検証」ボタンを押下後、「<p>study skill</p>」を要素として追加します。