「JavaScript」createTextNodeで文字を追加する

2022年3月16日

環境
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="追加" /></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>

 

JavaScript

Posted by arkgame