「JavaScript」createElementメソッドで新しい要素を作成する

2022年3月16日

環境
Google Chrome　99.0.4844.51

関数
1.createElementメソッド
変数 = document.createElement(タグ名);
引数は、タグ名(P、divなど)を指定します。
戻り値は、新しい要素です。

2.createTextNodeメソッド
変数 = document.createTextNode(文字);
引数は、文字を指定します。
戻り値はテキストノードです。

使用例

<!DOCTYPE html>
<html>
<body>
 <div id="cft">東京tokyo</div>
<p><input type="button" value="追加"></p>
<script>
function AddBtn(){
    // 新しいp要素を作成します
  const newDiv = document.createElement("p");
  　　//内容を設定します
  const newContent = document.createTextNode("大阪oosaka");
  　// テキストノードを新規作成した div に追加します
  　newDiv.appendChild(newContent);
   　// DOM に新しく作られた要素とその内容を追加します
  　const currentDiv = document.getElementById("cft");
  　document.body.insertBefore(newDiv, currentDiv);
}
</script>

</body>
</html>

実行結果
「追加」ボタンを押すと、div要素「cft」の前にpタグ要素「大阪oosaka」が追加されます。

JavaScript

Posted by arkgame