javascript img 元素插入(替换，不追加)

Question

我有以下功能:

function displayImage(n) {
   var pic = document.createElement("img");
   pic.setAttribute("src", h[n].imgUrl);
   pic.setAttribute("width", "50");
   l.appendChild(pic);
   //l.innerHTML = "<img src=\"" + h[n].imgUrl + "\">";
};

如果它没有注册到按钮，上面的代码会工作正常(每次点击按钮时，都会加载相关图像。就像现在一样，它会不断添加新图像，每次我点击，这是可以理解。我想要的是清除 div 上的内容并将其替换为新图像。上面代码中注释掉的版本工作正常，但它没有给我设置属性的可能性，我必须这样做(我知道我可以在 css 中设置属性，但在这种情况下我不能)。我将如何更改它以便每次运行该函数时，旧的 img 都会被新的替换？谢谢

Answer 1

有两个明显的选择可以解决您的问题，首先我会看一下满足规定要求的那个，您想要替换现有的 <img>带有新创建的元素 <img>元素:

function displayImage(n) {
   var pic = document.createElement("img");
   pic.setAttribute("src", h[n].imgUrl);
   pic.setAttribute("width", "50");

   // get a reference to the existing <img /> elements within
   // the node you refer to as 'l':
   var existingImage = l.getElementsByTagName('img');

   // if there are any <img> elements found:
   if (existingImage.length) {

       // we navigate to the parent-element of that first <img>
       // and replace that image, using Node.replaceChild(),
       // with the newly-created <img>:
       existingImage[0].parentNode.replaceChild(pic, existingImage[0]);
    }
}

或者我们可以简单地修改 src现有 <img> 的属性或属性:

function displayImage(n) {

   // get a reference to the existing <img /> elements within
   // the node you refer to as 'l':
   var existingImage = l.getElementsByTagName('img');

   // if there are any <img> elements found:
   if (existingImage.length) {

       // we navigate to the parent-element of that first <img>
       // and replace that <img> element's src property:
       existingImage[0].src = h[n].imgUrl
    }
}

或者，我们可以更新 <img>元素的 src属性:

function displayImage(n) {

   // get a reference to the existing <img /> elements within
   // the node you refer to as 'l':
   var existingImage = l.getElementsByTagName('img');

   // if there are any <img> elements found:
   if (existingImage.length) {

       // we navigate to the parent-element of that first <img>
       // and replace that <img> element's src property:
       existingImage[0].setAttribute('src', h[n].imgUrl);
    }
}

引用资料:

• Element.setAttribute .
• Node.parentNode .
• Node.replaceChil() .