innerHTML は、既存の要素に追加したり埋めたりする大量のコンテンツがある場合に意味があります。
少し前までは、DOM メソッドは要素の innerHTML プロパティへの割り当てよりもはるかに遅かったのですが、最近は非常に高速であり、すべての呼び出しが必要なため不便です。ただし、負担を軽減するために、要素の作成に必要なすべての情報を含むオブジェクトを受け入れるヘルパー関数を作成できます。
innerHTML の使用にはいくつかの注意事項があります。
- 他の兄弟の間に多数の兄弟ノードを挿入することは困難です。これを行うには、HTML を他の要素 (div など) に挿入し、作成した要素を DOM に移動します。残念ながら、これには documentFragment を使用できないため、子ノードを反復処理する必要があります
- テーブルで使用すると問題が発生する可能性があります。IE は、TD 以外のテーブル内のさまざまな要素の innerHTML を変更することを好みません。
- ブラウザーは異なる HTML を innerHTML プロパティとして生成するため、それを使用して要素をシリアル化することは問題があります
- innerHTML プロパティを使用すると、innerHTML によって変更されていなくても、他の要素のリスナーが削除される場合があります。
例えば
<div id="div0">div0</div>
<!-- Button to add a click listener to above div -->
<button onclick="
var el = document.getElementById('div0');
el.onclick = function(){alert(this.id);}
">Add listener as property</button>
<!-- Button to modify the body's innerHTML -->
<button onclick="
var body = document.getElementsByTagName('body')[0];
body.innerHTML += '';
">Append to body.innerHTML</button>
最初のボタンをクリックしてdiv0にクリック リスナーを追加できますが、2 番目のボタン (何もしないように見えますが、実際には innerHTML をリセットします) をクリックすると、リスナーが削除されます。