コンテナ要素に HTML を追加するための innerHTML に代わる最良の方法は何ですか?

コンテナ要素への HTML の追加: innerHTML の代替

コンテナ要素に HTML を追加しようとする場合、innerHTML は最適なオプションではない可能性があります。既存の HTML を上書きするメカニズムにより、動的メディアが中断される可能性があります。これを回避するために、別の方法を検討してみましょう。

実行可能なアプローチの 1 つは、新しい HTML 要素を作成し、その innerHTML を設定して、それをコンテナ要素に追加することです。ただし、これにより、ドキュメントに不要な余分な要素が導入されます。

var e = document.createElement('span');
e.innerHTML = htmldata;
element.appendChild(e);

この余分な要素を削除するには、insertAdjacentHTML() メソッドの利用を検討してください。これにより、中間要素を使用せずに、コンテナ要素に直接ターゲットを指定して挿入できます。

element.insertAdjacentHTML('beforeend', htmldata);

「beforebegin」、「afterbegin」、「beforeend」などのパラメータを使用して、HTML 文字列を追加する場所を指定します。

これは、insertAdjacentHTML() メソッドの動作例です:

var d1 = document.getElementById('one');
d1.insertAdjacentHTML('beforeend', '<div id="two">two</div>');

この代替メソッドは、 innerHTML を使用すると、ドキュメント内の既存の要素を中断することなく HTML コンテンツを更新できます。

以上がコンテナ要素に HTML を追加するための innerHTML に代わる最良の方法は何ですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。