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 2015年7月.

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

createElement() は Document インターフェイスのメソッドで、localName で指定された新しい HTMLElement を生成します。

localName が認識できない場合は HTMLUnknownElement を生成します。

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

options 省略可

以下のオプションのプロパティを持つオブジェクト（なお、is と customElementRegistry のどちらかのみを設定できます）。

is 省略可: customElements.define() を使用して、以前定義されたカスタム要素のタグ名を指定する文字列です。新しい要素には、そのカスタム要素のタグ名を値とする is 属性が指定されます。詳しくはウェブコンポーネントの例を参照してください。
customElementRegistry 省略可: CustomElementRegistry であり、カスタム要素のスコープ付きカスタム要素レジストリーを設定します。

返値

新しい Element です。

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

例外

InvalidCharacterError DOMException

localName の値が有効な要素名でない場合に発生します。文字列は、長さが 1 文字以上であり、かつ以下の条件を満たす場合、有効な要素名となります。

アルファベット文字で始まり、ASCII のホワイトスペース、NULL、/、>（それぞれU+0000、U+002F、U+003E）が含まれていないもの。
先頭が : (U+003A)、 _ (U+005F)、U+0080 以上 U+10FFFF 以下の範囲内の任意の文字で始まり、かつ、残りのコードポイントは、それらの同じ文字に加え、ASCII 英数字、- (U+002D)、および . (U+002E) のみを含むもの。

メモ: 以前のバージョンの仕様書では、より厳しい制限があり、localName が有効な XML 名であることが要求されていました。

NotSupportedError DOMException

is および customElementRegistry の両方のオプションが指定された場合、この例外が発生します。

例

基本的な例

この例では新しい <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

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);
}

addElement();

結果

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

メモ: 対応状況についてはブラウザーの互換性の節を、またカスタマイズされた組み込み要素の実装上の注意点については is 属性のリファレンスをご確認ください。

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

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

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

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

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

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

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

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

仕様書

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

ブラウザーの互換性

Help improve MDN

Learn how to contribute

This page was last modified on 2026年5月15日 by MDN contributors.

View this page on GitHub • Report a problem with this content