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

Вы можете избежать innerHTML от using cloneNode, чтобы клонировать элемент изображения:

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

Кстати, закрывая пустые HTML элементы с /> просто положить мусор в разметке.