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

2014年3月23日2022年3月16日

環境
Google Chrome　99.0.4844.51

書式
1.pタグ作成
const 変数 = document.createElement(“p");
戻り値は、新しい要素pタグです。
2.テキストノード作成
const 変数 = document.createTextNode(値);
戻り値はテキストノードです。

使用例

<!DOCTYPE html>

<html>

<body>

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>

<!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>

<!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>

「追加」ボタンを押すと、div要素「cft」に「文字追加テスト」文字が追加されます。下記コードが生成されます。 <p>文字追加テスト</p>

「追加」ボタンを押すと、div要素「cft」に「文字追加テスト」文字が追加されます。
下記コードが生成されます。
<p>文字追加テスト</p>

JavaScript

Posted by arkgame

関連投稿: