JavaScript document.createElement()

documentオブジェクトのcreateElementメソッドは，新たに要素を生成するメソッドである。生成された要素はまだドキュメントに組み込まれていないので，DOM操作メソッドでDOMに追加する必要がある。

構文

document.createElement(name)

引数

以下に示す引数を document.createElement メソッドに指定する。

name

生成する要素の要素タイプ名(タグ名)を指定する。

let p = document.createElement("p");
let div = document.createElement("div");

戻り値

document.createElement メソッドは、新しく生成した要素のオブジェクトを返す。

let div = document.createElement("div");

メソッドの引数に指定した要素タイプによって、生成される要素オブジェクトが実装しているインタフェースが異なる。実装しているインタフェースにより、要素オブジェクトが持つプロパティやメソッドが異なる。

createElement()の使用例

要素を新たに生成するJavaScriptを示す。

<div id="div1"></div>

<script>
  // 要素を生成する
  var p = document.createElement('p');
  p.innerHTML = 'new element';

  // DOMに組み込む
  var d = document.getElementById('div1');
  d.appendChild(p);
</script>

上記JavaScriptの実行結果を示す。

参考文献

Web Hypertext Application Technology Working Group (2023) DOM Living Standard