DOM appendChild替代

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中包含的图像，为什么不简单地使用chaning。 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";

这样，您只使用和编辑一个元素。