createElementで指定の要素名の要素を生成

 

タグ

  • JavaScript
  • HTML
  • HTML5
  • js

説明

document.createElement("div")で新しい要素を作ることができる。下記の実装では、変数に新しく生成した要素を代入してid org_div1の上に新しく生成したdiv要素を挿入している。

使ったメソッド

  • createElement
  • insertBefore

実装

index.html
<!DOCTYPE html>
<html>

<script>
var my_div = null;
var newDiv = null;

function addElement () {
  // 新しい div 要素を作成し、
  // それにいくつかの内容を与えます
  newDiv = document.createElement("div");
  newDiv.innerHTML = "<h1>僕はcreateElementによって生成されました!</h1>";

  // DOM に新しく作られた要素とその内容を追加します。
  my_div = document.getElementById("org_div1");
  document.body.insertBefore(newDiv, my_div);
}
</script>

<body onload="addElement()">
<div id='org_div1'> 上のテキストは動的に生成されました。</div>
</body>
</html>

参照

Node.insertBefore

document.createElement

実行

スクリーンショット 2017-08-09 22.07.52.png