问题描述
当我点击锚标签时,图像从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);
});
});
1楼
这是prepend()的默认行为吗?
是。 将DOM节点放在文档中的某个位置需要将其从文档中的任何位置删除。 它不能同时存在于两个地方。
var imgCopy = $image;
这imgCopy
$image
的值复制到imgCopy
。
该值是对象的引用 。
(在JavaScript中,变量只能保存对象的引用)。
如何避免这个问题?
创建DOM节点的副本。
在jQuery对象上调用.clone()
并添加返回值。
var imgCopy = $image.clone();
2楼
您需要更新代码
var $image = $("#left img");
var imgCopy = $image;
至
var imgCopy = $("#left img").clone();
供参考 -
3楼
也许看一下jQuery的来创建img元素的副本。