javascript - DOM appendChild备用

我正在创建一个DOM元素，如下所示；

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

现在，对于最后一行，而不是附加，每次调用该函数时都会创建多个img元素，我希望将其替换或始终是x的第一个子元素。

我应该如何做才能与跨浏览器兼容？

最佳答案

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";

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