javascript图片加载只能工作一次

Question

在我的代码中，我加载了一张图片：

var img = new Image();
img.src= 'image.png';

然后我将此图像附加到这样的div：

$('#divname').append(img);

到目前为止一切正常，但是当我尝试将相同的图像附加到另一个div时，例如：

$('#divname2').append(img);

图像不再存在。我的意思是当我打开页面时，第一个div包含图像但第二个div没有。如果我更改appends的顺序，#divname2将包含图片。这是一个正常的JavaScript行为还是我做错了什么？是否有可能解决这个问题？

Answer 1

你需要像这样克隆元素：

$('#divname2').append($(img).clone());

另一种解决方案是直接附加html。

var img = '<img src="image.png" />';
$('#divname').append(img);
$('#divname2').append(img);

Answer 2

当您通过$('#divname2').append(img)追加元素时，原始元素会从其父元素中删除，因为img是对它的引用。请改为添加clone图片：

var $img = $("<img/>", {
  src: 'image.png'
});
$('#divname').append($img);
$('#divname2').append($img.clone());

Answer 3

jQuery .append（）方法移动元素。你想要克隆元素。

一种方法：

$('#divname').append(img);
$('#divname2').append($(img).clone());

Answer 4

这是正常的javascript行为还是我做错了什么？

是的，这很正常。使用append或在页面上添加节点的其他方法，使用已存在的元素时，它只移动传递的元素。

是否可以解决此问题？

本机解决方案是使用cloneNode：

$('#divname2').append(img.cloneNode());

其他替代方法是将outerHTML传递给append：

$('#divname2').append(img.outerHTML);