innerHTML的动态图像加载不工作

Question

我有一个形象

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

和一个按钮

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

我试图加载IMG的按钮，点击一个div里面，就像如下：

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元素与/>只是把垃圾中的标记。