`element.innerHTML = \'...\'` の使用はなぜ悪い習慣なのでしょうか?

Element.innerHTML を追加する危険性

element.innerHTML = "..." を使用して要素を連結するというささやきを聞いたことがあるでしょう。コーディングは禁止です。しかし、その害は正確には何でしょうか?

次のスニペットを考えてみましょう:

var str = "<div>hello world</div>";
var elm = document.getElementById("targetID");

elm.innerHTML += str; // Not recommended?

問題は、HTML の解析とレンダリングが繰り返されることにあります。 innerHTML が割り当てられると、ブラウザは HTML を解析し、DOM を構築し、それをドキュメントに挿入する必要があります。このプロセスは時間がかかり、複雑な HTML 構造の場合は特に面倒になる可能性があります。

そのため、単純な要素の追加に innerHTML = を使用することは推奨されません。代わりに、appendChild メソッドを選択してください:

var newElement = document.createElement('div');
newElement.innerHTML = '<div>Hello World!</div>';
elm.appendChild(newElement);

appendChild を使用すると、不必要な再解析が回避され、既存の DOM 要素の整合性が維持されます。

注: 一部のブラウザーは = 演算子を最適化する場合がありますが、パフォーマンスの最適化のためにこの動作に依存しないことをお勧めします。

以上が`element.innerHTML = '...'` の使用はなぜ悪い習慣なのでしょうか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。