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

説明

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>