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.

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

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

options 省略可

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

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

HTML

html

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

JavaScript

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> 要素を表します。

// 要素のためのクラスを作成
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-createelement1

ブラウザーの互換性

Help improve MDN

Learn how to contribute

This page was last modified on ⁨2025年7月22日⁩ by MDN contributors.

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