JavaScript: createElement() 要素を作成する
要素を作成するには document オブジェクトの createElement() メソッドを使用します。
但し createElement() は要素を作成するだけで、DOMツリーに自動的に追加されるわけではありません。 作成した要素をDOMツリーに追加するためには、appendChild() メソッドや、insertBefore() メソッドを使用します。
書式
var element = document.createElement(要素名);
具体例
次のコードでは、div 要素と p 要素を作成しています。
// div要素を作成
var elem = document.createElement('div');
// p要素を作成
var elem = document.createElement('p');
コード例
まず次のような 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>
JavaScriptコード
// 要素を作成
var elem = document.createElement('div');
// id
elem.id = 'child';
// クラス名
elem.className = 'cls';
// テキスト内容
elem.innerHTML = '子要素';
// 親要素を取得
var parent = document.getElementById('parent');
// 要素を追加
parent.appendChild(elem);
大まかな流れとしては、createElement() メソッドで要素を作成し、 appendChild() メソッドで作成した要素を追加しています。
要素のid は「elem.id」、class は「elem.className」、テキスト内容は「elem.innerHTML」で設定できます。
作成した要素はappendChild() メソッドや insertBefore() メソッドで追加することで、DOMツリーに追加されます。