如何防止jQuery prepend（）移除HTML？

當我點擊錨標籤時，圖像從div#left變爲div#right。我想要複製圖像。這是prepend()的默認行爲？我怎樣才能避免這個問題？如何防止jQuery prepend（）移除HTML？

該圖像只是一個擁有很多孩子的大div的佔位符。

<!DOCTYPE html> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
    <title></title> 
    <script src="Scripts/jquery-2.1.0.min.js"></script> 
    <script type="text/javascript" src="Scripts/JavaScript.js"></script> 
</head> 
<body> 
    <div id="left" style="float:left"> 
     <img src="Images/Rooms/K1.jpg" alt="Alternate Text" height="200" width="200"/> 
    </div> 
    <div id="right" style="float:right"></div> 
    <a id="addImageToRight" href="#">Add Image toRight</a> 
</body> 
</html>

jQuery的是：

$(document).ready(function() { 
    $("#addImageToRight").click(function() { 
     var $image = $("#left img"); 
     var imgCopy = $image; 
     $("div#right").prepend(imgCopy); 
    }); 
});

來源

2015-08-08 Karthik

'imgCopy'不是副本。它是同一個對象。 – njzk2

這是prepend（）的默認行爲嗎？

是。將DOM節點放在文檔中的某個位置需要將其從文檔中的任何地方移出。它不能同時存在於兩個地方。

var imgCopy = $image;

那拷貝價值$image到imgCopy。該值是對象的參考。（在JavaScript中，變量只能持有對象的引用）。

如何避免此問題？

創建DOM節點的副本。在jQuery對象上調用.clone()並預先設置返回值。

var imgCopy = $image.clone();

來源

2015-08-08 07:13:57 Quentin

很好的解釋。謝謝 – Karthik

我相信你也可以將它作爲一個對象的屬性來存儲，當原始對象更新時它不會被更新。例如，'img = {}; img.copy = $ image;'。您可能需要將其複製到另一個對象中，以防止它獲得引用：'imgCopy = {}; imgCopy.copy = img.copy;'。另外，你的名字應該比我的更有創造力。 – trysis

@trysis - 這沒有任何意義。你只需要複製對不同對象的引用（並且有更多混淆的代碼）。你永遠不會複製DOM節點本身。 – Quentin

你需要從

var $image = $("#left img"); 
var imgCopy = $image;

更新代碼才能

var imgCopy = $("#left img").clone();

僅供參考 - http://plnkr.co/edit/R5yjTY06dKkqccwmxS62?p=preview

來源

2015-08-08 07:12:34 nikhil

解決了它。謝謝 – Karthik

也許看看jQuery的clone()來創建一個img元素的副本。

來源

2015-08-08 07:17:08 Adrian359

如何防止jQuery prepend（）移除HTML？

回答

相關問題