概要
指定の要素名の要素を生成します。
構文
element = document.createElement(tagName);
例
この例では新しい <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 仕様に準拠していません。localNameやnamespaceURIは生成した要素においてnullはセットされていません。詳細は バグ 280692 を参照してください。- Gecko 19.0 (Firefox 19.0 / Thunderbird 19.0 / SeaMonkey 2.16) より、
createElement(null)はcreateElement("null")と同じ動作となります。Opera も同様の動作となっていますが、 Google Chrome と Internet Explorer ではエラーとなります。