Document: createElement() メソッド

Baseline Widely available *

This feature is well established and works across many devices and browser versions. It’s been available across browsers since July 2015.

* Some parts of this feature may have varying levels of support.

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

構文

js
createElement(tagName)
createElement(tagName, options)

引数

tagName

生成される要素の型を特定する文字列です。生成される要素の nodeNametagName の値で初期化されます。このメソッドで修飾名 ("html:a" など) を使用しないでください。 HTML 文書で呼び出すと、 createElement() は要素を生成する前に tagName を小文字に変換します。 Firefox, Opera, Chrome では、 createElement(null)createElement("null") のように動作します。

options 省略可

以下のプロパティを持つオブジェクトです。

is

事前に customElements.define() で定義したカスタム要素のタグ名です。 詳しくはウェブコンポーネントの例を参照してください。

返値

新しい Element です。

メモ: 文書が HTMLDocument である場合、新しい HTMLElement を返しますが、これが最も一般的です。それ以外の場合は新しい Element を返します。

基本的な例

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

HTML

html
<!doctype html>
<html lang="ja">
  <head>
    <meta charset="UTF-8" />
    <title>要素のの操作</title>
  </head>
  <body>
    <div id="div1">上記のテキストは動的に生成されました。</div>
  </body>
</html>

JavaScript

js
document.body.onload = addElement;

function addElement() {
  // 新しい div 要素を作成します
  const newDiv = document.createElement("div");

  // いくつかの内容を与えます
  const newContent = document.createTextNode("みなさん、こんにちは!");

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

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

結果

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

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

js
// 要素のためのクラスを作成
class ExpandingList extends HTMLUListElement {
  constructor() {
    // コンストラクターでは常に super を最初に呼び出す
    super();

    // コンストラクターの定義は簡略化のため省略します。
    // …
  }
}

// 新しい要素を定義
customElements.define("expanding-list", ExpandingList, { extends: "ul" });

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

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

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

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

仕様書

Specification
DOM
# ref-for-dom-document-createelement①

ブラウザーの互換性

Report problems with this compatibility data on GitHub
desktopmobile
Chrome
Edge
Firefox
Opera
Safari
Chrome Android
Firefox for Android
Opera Android
Safari on iOS
Samsung Internet
WebView Android
WebView on iOS
createElement
options parameter

Legend

Tip: you can click/tap on a cell for more information.

Full support
Full support
No support
No support
See implementation notes.

関連情報