innerHTML を使用しないコンテナ要素への HTML の追加再訪

当面の問題は、制限を回避しながら HTML をコンテナ要素に追加する方法です。 innerHTML プロパティを使用する場合の落とし穴。 OP が正しく指摘しているように、innerHTML は既存のコンテンツを置き換える動作により、埋め込みメディアなどの動的要素を混乱させる可能性があります。

ありがたいことに、これらの問題を克服する代替手段があります: insertAdjacentHTML() 。このメソッドは、コンテナ要素内の指定された場所に HTML を追加する便利で柔軟な方法を提供します。

insertAdjacentHTML() メソッドは 2 つのパラメータを取ります:

1. 挿入位置: このパラメータは、HTML 文字列が挿入される場所を決定します。 4 つの値のいずれかをとります:

   • "beforebegin" - コンテナ要素の前
   • "afterbegin" - コンテナ要素の最初の子として
   • " beforeend" - コンテナ要素の最後の子として
   • "afterend" - コンテナ要素の後
2. HTML String: これは HTML です指定された位置に挿入されるコード。

特定のケースでは、位置として「beforeend」を使用し、HTML コンテンツを作成せずにコンテナ要素の最後に効果的に追加することをお勧めします。 createElement().

を使用する場合と同様の追加タグ。例:

var container = document.getElementById('myContainer');
container.insertAdjacentHTML('beforeend', '
');

このコードは、ID「newElement」を持つ新しい div 要素をコンテナの下部に追加します。

全体として、insertAdjacentHTML() は、innerHTML の欠点に遭遇することなく HTML をコンテナ要素に追加するための堅牢で汎用性の高いソリューションを提供します。