DOM

：

：

Document.createElement メソッド

　編集：2022.09.02 by T.A.

→、

指定のタグ名の要素オブジェクト Element を生成して返します。tagName が認識できない場合は HTMLUnknownElement を生成します。

構文
Document.createElement(tagName[, options])
Document 実質 document で良いようです。
tagName 生成する要素のタグ名を表す文字列。。

生成される要素の nodeName は tagName の値で初期化されます。このメソッドで修飾名（"html:a" など）を使用しないでください。

HTML 文書で呼び出すと、createElement() は要素を生成する前に tagName を小文字に変換します。Firefox、Opera、Chrome では、createElement(null) は createElement("null") のように動作します。

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

options 省略可。ElementCreationOptions オブジェクトで、is という名前のプロパティをひとつ持ち、その値は前に customElements.define() を使用して定義したカスタム要素の名前です。詳しくは下記のウェブコンポーネントの例を参照してください。
options オブジェクトのプロパティ：
is 前に customElements.define() を使用して定義したカスタム要素の名前
返値

Element。

例
基本的な例

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

HTML： 

<!DOCTYPE html>
<html>
<head>
  <title>||Working with elements||</title>
</head>
<body>
  <div id="div1">The text above has been created dynamically.</div>
</body>
</html>

JavaScript： 

document.body.onload = addElement;

function addElement () {
  // 新しい div 要素を作成します
  var newDiv = document.createElement("div");
  // いくつかの内容を与えます
  var newContent = document.createTextNode("Hi there and greetings!");
  // テキストノードを新規作成した div に追加します
  newDiv.appendChild(newContent);

  // DOM に新しく作られた要素とその内容を追加します
  var currentDiv = document.getElementById("div1");
  document.body.insertBefore(newDiv, currentDiv);
}
ウェブコンポーネントの例

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

// Create a class for the element
class ExpandingList extends HTMLUListElement {
  constructor() {
    // Always call super first in constructor
    super();

    // constructor definition left out for brevity
    ...
  }
}

// Define the new element
customElements.define('expanding-list', ExpandingList, { extends: "ul" });

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

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

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

例

em要素を作成し、指定要素の最後に追加する（組み込む）。

HTML： 

始<SPAN id=IdSpan>[SPAN要素]</SPAN>終

JavaScript： 

E=document.createElement("em");	//em要素の生成。
D=E.tagName;	//＝EM
E.innerHTML="EM要素<B>B要素</B>です";	//em要素の内容にHTMLを入れてしまう。
IdSpan.append(E);	//先ほどのSPAN要素の最後（終了タグの手前）に作成したem要素追加する。
D=IdSpan.innerHTML;	//＝[SPAN要素]<em>EM要素<b>B要素</b>です</em>
テスト