Question

我有以下功能：

diff()

如果它没有注册到按钮上面就可以正常工作了（每次点击一个按钮，相关图像就会被加载。就像现在一样，每次点击都会不断添加新图像，这是可以理解。我想要的是清除div上的内容并用新图像替换它。上面代码中注释掉的版本工作得很好但它没有给我设置属性的可能性，我必须这样做（我知道我可以在css中设置属性，但是在这个例子中我不能）。我怎么改变它以便每次运行该函数时，旧的img会被新的替换掉？谢谢

Answer 1

有两个显而易见的选择可以解决您的问题，首先我要查看符合规定要求的选项，您希望用新创建的{{{{}}替换现有<img>元素。 1}}元素：

<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

参考文献：

Answer 2

您可以使用replaceChild：

function displayImage(n) {
    var pic = document.createElement("img");
    pic.setAttribute("src", h[n].imgUrl);
    pic.setAttribute("width", "50");
    // replace image
    if (l.getElementsByTagName('img').length > 0) {
        l.replaceChild(pic, l.getElementsByTagName('img')[0]);
    } else {
        // append if no previous image
        l.appendChild(pic);
    }
};

Answer 3

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

};

先清空它，然后添加图像

javascript img元素插入（替换，不追加）

3 个答案: