Join MDN and developers like you at Mozilla's View Source conference, 12-14 September in Berlin, Germany. Learn more at https://viewsourceconf.org

document.createElement

概要

指定の要素名の要素を生成します。

構文

element = document.createElement(tagName);
  • element : 生成される element オブジェクト
  • tagName : 生成される要素の型を特定する文字列。生成される要素の nodeNametagName の値で初期化されます。

この例では新しい <div> 要素を生成し、"org_div1" の id の要素の前に挿入します。

<!DOCTYPE html>
<html>
<head>
<title>||Working with elements||</title>
</head>

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

function addElement () {
  // 新しい div 要素を作成し、
  // それにいくつかの内容を与えます
  newDiv = document.createElement("div");
  newDiv.innerHTML = "<h1>Hi there and greetings!</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>

注記

  • デフォルト値のある良く知られた属性がある場合は、それらを表す属性のノードは自動的に生成され要素に適用されます。
  • 正規の名前と名前空間の URI がある要素を作成するためには createElementNS メソッドを使用します。
  • createElement の Gecko 実装は XUL や XHTML ドキュメントに対する DOM 仕様に準拠していません。localNamenamespaceURI は生成した要素において null はセットされていません。詳細は バグ 280692 を参照してください。
  • Gecko 19.0 (Firefox 19.0 / Thunderbird 19.0 / SeaMonkey 2.16) より、createElement(null)createElement("null") と同じ動作となります。Opera も同様の動作となっていますが、 Google Chrome と Internet Explorer ではエラーとなります。

仕様書

ドキュメントのタグと貢献者

タグ: 
 このページの貢献者: fscholz, AshfaqHossain, ethertank, Mgjbot, Ryotakano
 最終更新者: AshfaqHossain,