JavaScriptのinnerHTMLとcreateElementの比較

概要: このチュートリアルでは、DOMツリーに新しい要素を作成する際のinnerHTMLとcreateElement()の違いについて学習します。

1) createElementの方がパフォーマンスが良い

クラスがcontainerであるdiv要素があるとします。

<div class="container"></div>Code language: HTML, XML (xml)

要素を作成して追加することで、新しい要素をdiv要素に追加できます。

let div = document.querySelector('.container');

let p = document.createElement('p');
p.textContent = 'JS DOM';
div.appendChild(p);Code language: JavaScript (javascript)

以下のように、innerHTMLを使用して要素のHTMLを直接操作することもできます。

let div = document.querySelector('.container');
div.innerHTML += '<p>JS DOM</p>';Code language: JavaScript (javascript)

要素に属性を追加したい場合、innerHTMLを使用する方が簡潔で短くなります。

let div = document.querySelector('.container');
div.innerHTML += '<p class="note">JS DOM</p>';Code language: JavaScript (javascript)

しかし、innerHTMLを使用すると、ウェブブラウザはdiv要素内のすべてのDOMノードを再解析して再作成するため、新しい要素を作成してdivに追加するよりも効率が悪くなります。言い換えれば、新しい要素を作成してDOMツリーに追加する方が、innerHTMLよりもパフォーマンスが優れています。

2) createElementの方が安全

innerHTMLのチュートリアルで説明したように、データがデータベースなど信頼できるソースからのものである場合にのみ使用してください。

制御できないコンテンツをinnerHTMLに設定すると、悪意のあるコードが注入され、実行される可能性があります。

3) DOMノードの作成にはDocumentFragmentを使用する

要素のリストがあり、各反復処理で…

let div = document.querySelector('.container');

for (let i = 0; i < 1000; i++) {
   let p = document.createElement('p');
   p.textContent = `Paragraph ${i}`;
   div.appendChild(p);
}Code language: JavaScript (javascript)

このコードは、各反復処理でスタイルの再計算、ペイント、レイアウトが行われるため、効率的ではありません。

これを克服するために、一般的にDocumentFragmentを使用してDOMノードを作成し、それをDOMツリーに追加します。

let div = document.querySelector('.container');

// compose DOM nodes
let fragment = document.createDocumentFragment();
for (let i = 0; i < 1000; i++) {
   let p = document.createElement('p');
   p.textContent = `Paragraph ${i}`;
   fragment.appendChild(p);
}

// append the fragment to the DOM tree
div.appendChild(fragment);Code language: JavaScript (javascript)

この例では、DocumentFragmentオブジェクトを使用してDOMノードを作成し、最後に一度だけフラグメントをアクティブなDOMツリーに追加しました。

DocumentFragmentはアクティブなDOMツリーにリンクされていないため、パフォーマンスに影響を与えません。

詳細はDocumentFragmentチュートリアルをご覧ください。