Question

我有一张图片

`<img src="../images/Editing-Edit-icon.png" data-toggle="modal" data-target=".editButton"  id="deleteBtn"/>`

和一个按钮

`<button onclick="loadImage()">`

我正在尝试在按钮单击的div中加载img，如下所示：

function loadImage(){
 cell1.innerHTML = document.getElementById("deleteBtn").value;
}

但它不起作用。我怎么能这样做？

Answer 1

function loadImage(){
    cell1.innerHTML = '<img src="'+document.getElementById("deleteBtn").src+'" />';
}

Answer 2

如果您想要src图片，则必须从src标记获取img属性

 cell1.innerHTML = document.getElementById("deleteBtn").src;

然后，如果您有带有deleteBtn src属性的加载图像，则必须设置：

cell1.innerHTML = "<img src='" + document.getElementById("deleteBtn").src + "' />";

Answer 3

您可以通过using cloneNode来避免 innerHTML 来克隆图片元素：

var clone = document.getElementById('deleteBtn').cloneNode();
clone.id = /* whatever */
// Change other properties as required
cell.appendChild(clone);

顺便说一句，使用/>关闭空HTML元素只会将垃圾放入标记中。

Innerhtml动态图像加载不起作用

3 个答案: