JavaScript

JavaScript's createElement is a function that allows you to programmatically create new HTML elements.

createElement() [method]

　JavaScriptの createElementは、指定したタグ名の新しい HTML要素を作成するためのメソッドです。例えば、document.createElement('p')とすると、新しい<p>要素が生成されます。このメソッドを使って動的にページの内容を追加・変更することができます。

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

JavaScript

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

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

JavaScript

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

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

Sample

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

HTML

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

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

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

HTML

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

Sample

親要素

HTML + JavaScript source

JavaScript

<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ツリーに追加されます。