We're looking for a user researcher to understand the needs of developers and designers. Is this you or someone you know? Check out the post: https://mzl.la/2IGzdXS

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 の定義
現行の標準  

ブラウザー実装状況

We're converting our compatibility data into a machine-readable JSON format. This compatibility table still uses the old format, because we haven't yet converted the data it contains. Find out how you can help!

     
機能 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)。

関連情報

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

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