Question

当我点击锚标记时，图像从div#left转移到div#right。我希望复制图像。这是prepend()的默认行为吗？我该如何避免这个问题？

图像只是一个有很多孩子的大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);
    });
});

Answer 1

这是prepend（）的默认行为吗？

是。将DOM节点放在文档中的某个位置需要将其从文档中的任何位置删除。它不可能同时存在于两个地方。

var imgCopy = $image;

将$image的值复制到imgCopy。该值是对象的引用。（在JavaScript中，变量只能保存对象的引用）。

如何避免这个问题？

创建DOM节点的副本。在jQuery对象上调用.clone()并添加返回值。

var imgCopy = $image.clone();

Answer 2

您需要从

更新代码

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

到

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

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

Answer 3

也许看一下jQuery的clone()来创建img元素的副本。

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

3 个答案: