Document.createElement()

HTML 文書において、 document.createElement() メソッドは tagName で指定された HTML 要素を生成し、または tagName が認識できない場合は HTMLUnknownElement を生成します。

構文

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

引数

tagName
生成される要素の型を特定する文字列。生成される要素の nodeNametagName の値で初期化されます。このメソッドで修飾名 ("html:a" など) を使用しないでください。 HTML 文書で呼び出すと、 createElement() は要素を生成する前に tagName を小文字に変換します。 Firefox, Opera, Chrome では、 createElement(null)createElement("null") のように動作します。
optionsOptional
省略可能な ElementCreationOptions オブジェクトで、 is という名前のプロパティをひとつ持ち、その値は前に customElements.define() を使用して定義したカスタム要素の名前です。詳しくはウェブコンポーネントの例を参照してください。

返値

新しい 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); 
}

ウェブコンポーネントの例

以下の例の断片は expanding-list-web-component の例から取ったものです (ライブでもご覧ください)。この場合、カスタム要素は HTMLUListElement を拡張し、 <ul> 要素を表します。

// Create a class for the element
class ExpandingList extends HTMLUListElement {
  constructor() {
    // Always call super first in constructor
    super();

    // constructor definition left out for brevity
    ...
  }
}

// Define the new element
customElements.define('expanding-list', ExpandingList, { extends: "ul" });

この要素のインスタンスをプログラム的に生成したければ、次の行のような呼び出しを使用します。

let expandingList = document.createElement('ul', { is : 'expanding-list' })

新しい要素には is 属性が与えられ、その値はカスタム要素のタグ名になります。

: カスタム要素仕様書の以前のバージョンととの後方互換性のため、一部のブラウザーはオブジェクトの代わりに文字列を渡すことを認めており、この文字列はカスタム要素のタグ名です。

仕様書

仕様書 状態 備考
DOM
Document.createElement の定義
現行の標準

ブラウザーの互換性

Update compatibility data on GitHub
デスクトップモバイル
ChromeEdgeFirefoxInternet ExplorerOperaSafariAndroid webviewAndroid 版 ChromeAndroid 版 FirefoxAndroid 版 OperaiOSのSafariSamsung Internet
createElementChrome 完全対応 1Edge 完全対応 12Firefox 完全対応 1
補足
完全対応 1
補足
補足 Doesn't conform to the DOM spec for XUL and XHTML documents: localName and namespaceURI are not set to null on the created element.
IE 完全対応 5Opera 完全対応 6Safari 完全対応 1WebView Android 完全対応 1Chrome Android 完全対応 18Firefox Android 完全対応 4Opera Android 完全対応 10.1Safari iOS 完全対応 1Samsung Internet Android 完全対応 1.0
options parameterChrome 完全対応 あり
補足
完全対応 あり
補足
補足 For backwards compatibility, the options argument can be an object or a string with the custom element tag name, although the string version is deprecated.
Edge 完全対応 79
補足
完全対応 79
補足
補足 For backwards compatibility, the options argument can be an object or a string with the custom element tag name, although the string version is deprecated.
Firefox 完全対応 50
補足
完全対応 50
補足
補足 Firefox accepts a string instead of an object here, but only from version 51 onwards. In version 50, options must be an object.
IE 未対応 なしOpera 完全対応 あり
補足
完全対応 あり
補足
補足 For backwards compatibility, the options argument can be an object or a string with the custom element tag name, although the string version is deprecated.
Safari 未対応 なしWebView Android 完全対応 あり
補足
完全対応 あり
補足
補足 For backwards compatibility, the options argument can be an object or a string with the custom element tag name, although the string version is deprecated.
Chrome Android 完全対応 あり
補足
完全対応 あり
補足
補足 For backwards compatibility, the options argument can be an object or a string with the custom element tag name, although the string version is deprecated.
Firefox Android 完全対応 50
補足
完全対応 50
補足
補足 Firefox accepts a string instead of an object here, but only from version 51 onwards. In version 50, options must be an object.
Opera Android 完全対応 あり
補足
完全対応 あり
補足
補足 For backwards compatibility, the options argument can be an object or a string with the custom element tag name, although the string version is deprecated.
Safari iOS 未対応 なしSamsung Internet Android 完全対応 あり
補足
完全対応 あり
補足
補足 For backwards compatibility, the options argument can be an object or a string with the custom element tag name, although the string version is deprecated.

凡例

完全対応  
完全対応
未対応  
未対応
実装ノートを参照してください。
実装ノートを参照してください。

関連情報