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

JavaScript入門