Innerhtml动态图像加载无法工作

Innerhtml dynamic image loading not working

本文关键字：工作 加载 动态 图像 Innerhtml      更新时间：2023-09-26

我有一个图像

`<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;
}

但它不起作用。我该怎么做？

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

如果想要图像的src，则必须从img标签获取src属性

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

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

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

您可以通过使用cloneNode克隆图像元素来避免innerHTML：

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

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

相关文章：