Document: createElement() メソッド
HTML 文書において、 document.createElement()
メソッドは tagName で指定された HTML 要素を生成し、または tagName が認識できない場合は HTMLUnknownElement
を生成します。
構文
createElement(tagName)
createElement(tagName, options)
引数
tagName
-
生成される要素の型を特定する文字列です。生成される要素の
nodeName
は tagName の値で初期化されます。このメソッドで修飾名 ("html:a" など) を使用しないでください。 HTML 文書で呼び出すと、createElement()
は要素を生成する前に tagName を小文字に変換します。 Firefox, Opera, Chrome では、createElement(null)
はcreateElement("null")
のように動作します。 options
省略可-
以下のプロパティを持つオブジェクトです。
is
-
事前に
customElements.define()
で定義したカスタム要素のタグ名です。 詳しくはウェブコンポーネントの例を参照してください。
返値
新しい Element
です。
メモ: 文書が HTMLDocument である場合、新しい HTMLElement を返しますが、これが最も一般的です。それ以外の場合は新しい Element を返します。
例
基本的な例
この例では新しい <div>
を生成し、 id が "div1
" である要素の前に挿入します。
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 Standard # ref-for-dom-document-createelement① |
ブラウザーの互換性
BCD tables only load in the browser
関連情報
Node.removeChild()
Node.replaceChild()
Node.appendChild()
Node.insertBefore()
Node.hasChildNodes()
document.createElementNS()
— 要素の名前空間 URI を明示的に指定するために使用