当前位置: 代码迷 >> JavaScript >> 如何防止jQuery prepend()删除HTML?
  详细解决方案

如何防止jQuery prepend()删除HTML?

热度:34   发布时间:2023-06-07 15:28:15.0

当我点击锚标签时,图像从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);
    });
});

这是prepend()的默认行为吗?

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

 var imgCopy = $image; 

imgCopy $image复制到imgCopy 该值是对象的引用 (在JavaScript中,变量只能保存对象的引用)。

如何避免这个问题?

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

var imgCopy = $image.clone();

您需要更新代码

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

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

供参考 -

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

  相关解决方案