javascript - DOMappendChild代替

Question

次のようにDOM要素を作成しています。

var imgEle = document.createElement('img');
    imgEle.src = imgURL;         
    x.appendChild(imgEle);

ここで、関数が呼び出されるたびに複数のimg要素を作成する追加の代わりに、最後の行を置き換えたいか、常にxの最初の子要素にします。

クロスブラウザの互換性のために同じことをどのように行う必要がありますか？

Answer 1

var xChildren = x.childNodes;
if(xChildren[0])
   x.replaceChild(myIMG, xChildren[0]);
else
   x.appendChild(myIMG);

それはトリックを行う必要があります

X のすべての子要素を取得してから、それらの最初の要素が定義されているかどうかを確認します。(複数ある場合は、x.innerHTML メソッドを使用して一度にすべて削除することもできます)。定義されている場合は、新しく作成した要素に置き換えます。定義されていない場合は、単純に要素を追加します。

編集: ループ内で要素を作成して追加することにより、スクリプトが少し重くなります.x に含まれる画像を変更したいだけのように見えるので、単に .src 属性を変更することに頼ってみませんか?

var xChildren = x.childNodes;
var myIMG;    
if(xChildren[0])
   mIMG = xChildren[0]; //you should be sure that this is an image 
   // perhaps you might want to check its type.
else{
   mIMG = document.createElement("img");
   mIMG.src = "source";
   x.appendChild(mIMG);
}

//now the loop
while( your_condition )
    mIMG.src = "source of the image";

このようにして、1 つの要素のみを使用および編集します。