JavaScript

JavaScript createElement method.

createElement

　要素を作成するには documentオブジェクトの createElement()メソッドを使用します。

　但し createElement()は要素を作成するだけで、DOMツリーに自動的に追加されるわけではありません。作成した要素をDOMツリーに追加するためには、appendChild()メソッドや、insertBefore()メソッドを使用します。

const element = document.createElement(要素名);

　次のコードでは、div要素と p要素を作成しています。

// div要素を作成
const elem = document.createElement('div');

// p要素を作成
const elem = document.createElement('p');

Sample

　まず次のような div要素 id="parent" を用意します。

<div id="parent">親要素</div>

　上の div要素に対して、JavaScriptで新たに子要素(div要素)を作成して、追加します。

　子要素(div要素)に対して id="child"、class="cls"、innerHTML="子要素"を設定して、 次のような DOMツリーを作成します。

<div id="parent">親要素
	<div id="child" class="cls">子要素</div>
</div>

<div id="parent">親要素</div>
<script>
	// 要素を作成
	const elem = document.createElement('div');
	// id
	elem.id = 'child';
	// クラス名
	elem.className = 'cls';
	// テキスト内容
	elem.innerHTML = '子要素';
	
	// 親要素を取得
	const parent = document.getElementById('parent');
	
	// 要素を追加
	parent.appendChild(elem);
</script>

　大まかな流れとしては、createElement()メソッドで要素を作成し、appendChild()メソッドで作成した要素を追加しています。

　要素の idは「elem.id」、classは「elem.className」、テキスト内容は「elem.innerHTML」で設定できます。

　作成した要素は appendChild()メソッドや insertBefore()メソッドで追加することで、DOMツリーに追加されます。

　Google Chromeの「設定」→「その他のツール」→「ディベロッパーツール」→「要素」タブで確認してみると上図のように正しく DOMツリーに追加されていることが確認できました。