Javascript：將圖像複製到某個變量中以放置在某處？

Question

我可以使用JavaScript在頁面上隱藏圖像，將其定義爲變量，然後再放在頁面上的其他位置？

到目前爲止，我想，我也許能夠做到這一點，像這樣：

HTML：

<div id="images" class="images hidden"> 
    <img src="http://lorempixel.com/200/200/cats/" style=""> 
</div> 


<div onclick="createImgHtml"> 
    <button>Click to show image</button> 
</div> 

JAVASCRIPT：

var images = document.getElementById('images'); 

function createImgHtml() { 
    return '<div>' + images + '</div>'; 
} 

顯然，這將無法正常工作現在，因爲我不知道如何編寫包含圖像的<div>的HTML。我該如何改變我的功能，以便它實際上使用變量創建HTML代碼並將其放置在頁面上？

Answer 1

這取決於你如何存儲/使用的圖像。

1. 相同的範圍。

你已經將dom保存在一個變量中，爲什麼要創建html？

1. 其他

您第一字符串化的DOM對象，然後保存地方。

以下是相同運行時作用域的代碼，只需將您的dom複製到任意數量，然後將其附加到文檔中。

var images = document.getElementById('images') 
 
images2 = images.cloneNode() 
 
images2.className = "images" 
 
var img = document.getElementsByTagName('img')[0] 
 
var body = document.getElementsByTagName('body')[0] 
 

 
function createImgHtml() { 
 
    body.appendChild(images2.cloneNode().appendChild(img.cloneNode())) 
 
    // return '<div>' + images + '</div>'; 
 
}

.hidden { 
 
    display: none; 
 
}

<div id="images" class="images hidden"> 
 
    <img src="http://fakeimg.pl/350x200/?text=Hello" style=""> 
 
</div> 
 

 

 
<div> 
 
    <button onclick="createImgHtml()">Click to show image</button> 
 
</div>

Answer 2

將該ID添加到img。

HTML

<img src="http://example.com/blah.jpg" id="images" /> 

JS

const images = document.querySelector('#images') 
const imageSrc = images.getAttribute('src'); 

function createImageHtml() { 
    return `<div>${imageSrc}</div>`; 
} 

鏈接：

Element.getAttribute()

Document.querySelector()

Template Literals

Answer 3

不知道如果我完全理解你，但這裏也許有些答案可以幫助

• 您可以添加一個類你要隱藏的圖像，比使用JavaScript來通過類名得到它並循環。

• 爲什麼不使用localstorage存儲圖像

的陣列可以遍歷它，甚至有對象

您可以打印使用javasript這裏閱讀更多關於它的屏幕。

HTML DOM appendChild() Method

Answer 4

如果我理解正確的話，你不需要移動圖像，而是，顯示它（使它取消隱藏）。

即可以通過從除去類hidden含div容易地完成：

HTML：

<div id="images" class="images hidden"> 
    <img src="http://lorempixel.com/200/200/cats/" style=""> 
</div> 


<div> 
    <button onclick="showImage">Click to show image</button> 
</div> 

JAVASCRIPT：

function showImage() { 
    var images = document.getElementById('images'); 
    images.className = images.className.replace('hidden',' '); 
} 

PS：我移動onclick屬性爲button而不是div。

function showImage() { 
 
    var images = document.getElementById('images'); 
 
    images.className = images.className.replace('hidden',' '); 
 
}

.hidden { 
 
    dispaly: none; 
 
}

<div id="images" class="images hidden"> 
 
    <img src="http://lorempixel.com/200/200/cats/" style=""> 
 
</div> 
 
<div> 
 
    <button onclick="showImage">Click to show image</button> 
 
</div>