如何防止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？

回答

相关问题