このページはコミュニティーの尽力で英語から翻訳されました。MDN Web Docsコミュニティーについてもっと知り、仲間になるにはこちらから。
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 を生成します。
構文
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>上記のテキストは動的に生成されました。</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-createelement① |