.createElement()

https://developer.mozilla.org/en-US/docs/Web/API/document.createElement

特定のHTML要素、または知られていない要素であればHTMLUnknownElementをHTMLドキュメント内に作成します。

XULドキュメント内では、指定したXUL要素を生成します。その他のドキュメント内では、nullのnamespaceURI(?)を使用して、要素を生成します。

文法

var element = document.createElement(tagName);

引数説明

tagName

引数	説明
tagName	型：`string` 生成する要素(Element)のタイプを指定します。生成される要素のnodeNameが、 tagNameの値で初期化されます。このメソッドでは、条件付きの`html:a`のような使い方はしないでください。
戻り値	説明
element	型：Element 生成される要素オブジェクトです。

型：string

生成する要素(Element)のタイプを指定します。生成される要素のnodeNameが、 tagNameの値で初期化されます。このメソッドでは、条件付きのhtml:aのような使い方はしないでください。

戻り値説明

element

型：Element

生成される要素オブジェクトです。

例

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

<!DOCTYPE html>
<html>
<head>
<title>||Working with elements||</title>
<script>
//document.body.onload = addElement;

var my_div = null;
var newDiv = null;

var addElement = function(){
  // 新しいdiv要素を作成、コンテンツ追加
  var newDiv = document.createElement("div");
  var newContent = document.createTextNode("こんにちは!");

  //新しく作成したdivにテキストノードを追加
  newDiv.appendChild(newContent);

  // 作成したdivをDOM内へ追加
  my_div = document.getElementById("org_div1");
  document.body.insertBefore(newDiv, my_div);
}

document.getElementById("run").onclick = addElement;
</script>
</head>
<body>
<div id='org_div1'>ボタンをクリックすると、動的にテキストが作成されます。</div>
<input type="button" value="クリック" id="run" />

</body>
</html>

注意事項

HTMLドキュメントとして、ドキュメントオブジェクト上で呼び出された場合、要素の作成の前に、createElementはその引数を小文字にします。(翻訳に自信無し)
条件付きの名前またはnamespace URIで要素を作成するには、代わりにdocument.createElementNS()を使用します。
Gecko 2.0(Firefox 4 / Thunderbird 3.3 / SeaMonkey 2.1)より前は、 quirksモードでtagNameを角括弧(<と>)で囲む事ができましたが、 Gecko2.0以降は、この機能はquirksと標準モードの両方で同じように正しく動作するようになりました。
Gecko 19.0 (Firefox 19.0 / Thunderbird 19.0 / SeaMonkey 2.16)以降では、 createElement(null)はcreateElement("null")のように動作します。 Operaは同じように動作しますが、ChromeとInternet Explorerはエラーをスローします。
Gecko 22.0 (Firefox 22.0 / Thunderbird 22.0 / SeaMonkey 2.19)以降では、 createElementは引数が、"bgsounds"、"multicol"、または"image"の際に、 HTMLSpanElementを使用しなくなりました。代わりに"bgsound"と"multicol"にはHTMLUnknownElementを、 "image"にはHTMLElementを使用します。

仕様

DOM 2 Core: createElement createElementのGeckoの実装は、XULとXHTMLドキュメントのDOM使用に準拠していません。 localNameとnamespaceURIは、作成された要素にnullで設定されません。詳細は、bug 280692を参照してください。
HTML5: APIs in HTML documents

このページは、ページトップのURL先のMozilla Developer Network(以下、MDN)のコンテンツを翻訳した内容を基に構成されています。構成について異なる点も含まれますので、下記の項目を確認し、必要に応じて元のコンテンツをご確認ください。もし、誤訳などの間違いを見つけましたら、 @tomofまで教えていただければ幸いです。

特定のブラウザに特化しすぎている情報やあまりにも古い情報、または試験的に導入されているようなAPIや機能については、省略していることがあります。
例やデモについて、実際にページ内で動作させる関係で一部ソースコードを変更している場合や、その例で使用しているコンテンツの単語や文章などを日本人向けに変更しいてる場合があります。
MDNの更新頻度が高いため、元のコンテンツと比べ情報が古くなっている可能性があります。
"訳注:"などの断わりを入れた上で、日本人向けの情報の追記を行っている事があります。