HTML ドキュメントにおいて Document.createElement() メソッドは、tagName で指定した HTML 要素を生成する、あるいは tagName を認識できない場合に HTMLUnknownElement を生成します。XUL ドキュメントでは、指定した XUL 要素を生成します。その他のドキュメントでは、null 名前空間 URI の要素を生成します。

要素の名前空間 URI を明示的に指定するには、document.createElementNS() を使用します。

構文

var element = document.createElement(tagName[, options]);

引数

tagName
生成される要素の型を特定する文字列。生成される要素の nodeNametagName の値で初期化されます。このメソッドで修飾名 ("html:a" など) を使用しないでください。HTML ドキュメントで呼び出すと、createElement() は要素を生成する前に tagName を小文字に変換します。Firefox、Opera、Chrome では、createElement(null)createElement("null") のように動作します。
optionsOptional
is という名前のプロパティをひとつ持つ、省略可能な ElementCreationOptions オブジェクトです。is プロパティの値は、前に customElements.define() を使用して定義したカスタム要素の名前です。以前のバージョンの Custom Elements 仕様書 との後方互換性のため、一部のブラウザーはオブジェクトの代わりに文字列を渡すことを認めており、この文字列はカスタム要素のタグ名です。この引数の使用方法について、詳しくは Extending native HTML elements をご覧ください。
新しい要素には、値がカスタム要素のタグ名である is 属性が与えられます。カスタム要素は、一部のブラウザーのみ使用できる実験的な機能です。

戻り値

新しい Element.

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

HTML

<!DOCTYPE html>
<html>
<head>
  <title>||Working with elements||</title>
</head>
<body>
  <div id="div1">The text above has been created dynamically.</div>
</body>
</html>

JavaScript

document.body.onload = addElement;

function addElement () { 
  // 新しい div 要素を作成します 
  var newDiv = document.createElement("div"); 
  // いくつかの内容を与えます 
  var newContent = document.createTextNode("Hi there and greetings!"); 
  // テキストノードを新規作成した div に追加します
  newDiv.appendChild(newContent);  

  // DOM に新しく作られた要素とその内容を追加します 
  var currentDiv = document.getElementById("div1"); 
  document.body.insertBefore(newDiv, currentDiv); 
}

仕様

仕様書 策定状況 コメント
DOM
Document.createElement の定義
現行の標準  

ブラウザー実装状況

現在、互換性データを可読形式の JSON フォーマットに置き換えているところです。 この互換性一覧は古い形式を使っており、これに含まれるデータの置き換えが済んでいません。 手助けしていただける場合は、こちらから!

     
機能 Chrome Edge Firefox (Gecko) Internet Explorer Opera Safari (WebKit)
基本サポート (有) (有) (有)[1][2] (有) (有) (有)
options 引数 (有)[3] ? 50 (50)[4][5] ? ? ?
  
機能 Android Android Webview Edge Firefox Mobile (Gecko) IE Phone Opera Mobile Safari Mobile Android 版 Chrome
基本サポート (有) (有) (有) (有) (有) (有) (有) (有)
options 引数 (有) (有)[3] ? ? ? ? ? (有)[3]

[1] Gecko 22.0 (Firefox 22.0 / Thunderbird 22.0 / SeaMonkey 2.19) より、createElement() は引数が "bgsounds"、"multicol"、または "image" である場合に、HTMLSpanElement インターフェイスを使用しません。代わりに、"bgsound" と "multicol" には HTMLUnknownElement を、 "image" には HTMLElement を使用します。

[2] createElement の Gecko 実装は XUL や XHTML ドキュメントに対する DOM 実装に準拠していません。生成した要素の localNamenamespaceURInull に設定されません。詳細は バグ 280692 を参照してください。

[3] 以前のバージョンの仕様書ではこの引数が文字列であり、その値はカスタム要素のタグ名でした。例えば document.createElement("button", {id: "custom-button"}) ではなく document.createElement("button", "custom-button") とすることができました。後方互換性のため Chrome はどちらの形式も許容していますが、文字列形式は非推奨です。

[4] 上記 [3] を参照: Chrome と同様に Firefox もオブジェクトの代わりに文字列も受け入れますが、バージョン 51 以降に限ります。バージョン 50 では、options はオブジェクトであることが必須です。

[5] Firefox でカスタム要素の実験を行うには、設定項目 dom.webcomponents.enabled および dom.webcomponents.customelements.enabledtrue に設定しなければなりません。

Quantum CSS に関する補足

  • Gecko では、切り離されたサブツリー (例えば createElement() を使用して作成した、DOM に未挿入の <div>) を作成すると、サブツリーのルート要素がブロックレベル要素として設定されます。

    Firefox の新たな並列処理 CSS エンジン (Quantum CSS または Stylo としても知られています) では仕様書に従って、インラインとして設定します (バグ 1374994)。

関連情報

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

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