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元素與/>只是把垃圾中的標記。