1. ホーム
  2. ジャバスクリプト

[解決済み】Javascript - コンテナ要素にinnerHTMLなしでHTMLを追加する

2022-04-20 14:35:52

質問

innerHTMLを使用せずにコンテナ要素にHTMLを追加する方法が必要です。innerHTMLを使いたくない理由は、このような使い方をした場合です。

element.innerHTML += htmldata

先にhtmlを全て置き換えてから、古いhtml+新しいhtmlを追加することで動作します。これは、埋め込まれたフラッシュビデオなどの動的メディアをリセットしてしまうので、よくありません...。

この方法でうまくいきました。

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

しかし、この方法の問題点は、ドキュメントに余分なspanタグがあることです。

では、どうすればいいのでしょうか?ありがとうございます。

どのように解決するのですか?

代替案を出すには(例えば DocumentFragment は動作しないようです)。新しく生成されたノードの子ノードを繰り返し、それらのみを追加することでシミュレートすることができます。

var e = document.createElement('div');
e.innerHTML = htmldata;

while(e.firstChild) {
    element.appendChild(e.firstChild);
}