「JavaScript」createTextNodeで文字を追加する
環境
Google Chrome 99.0.4844.51
書式
1.pタグ作成
const 変数 = document.createElement(“p");
戻り値は、新しい要素pタグです。
2.テキストノード作成
const 変数 = document.createTextNode(値);
戻り値はテキストノードです。
使用例
<!DOCTYPE html> <html> <body> <div id="cft"></div> <p><input type="button" value="追加" onclick="addBtn()" /></p> <script> function addBtn() { const fc = document.getElementById("cft"); // 要素の追加 if (!fc.hasChildNodes()) { //pタグ作成 const pe = document.createElement("p"); //テキストノード作成 const txtContent = document.createTextNode("文字追加テスト"); //pタグに子ノードを追加 pe.appendChild(txtContent); //divに子ノード(pタグ)を追加 fc.appendChild(pe); } } </script> </body> </html>
実行結果
「追加」ボタンを押すと、div要素「cft」に「文字追加テスト」文字が追加されます。 下記コードが生成されます。 <p>文字追加テスト</p>