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

2022年3月16日

環境
Google Chrome 99.0.4844.51

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

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

使用例

Plain text
Copy to clipboard
Open code in new window
EnlighterJS 3 Syntax Highlighter
<!DOCTYPE html>
<html>
<body>
<div id="cft">東京tokyo</div>
<p><input type="button" value="追加" onclick="AddBtn()"></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>
<!DOCTYPE html> <html> <body> <div id="cft">東京tokyo</div> <p><input type="button" value="追加" onclick="AddBtn()"></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>
<!DOCTYPE html>
<html>
<body>
 <div id="cft">東京tokyo</div>
<p><input type="button" value="追加" onclick="AddBtn()"></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