克隆图像对象并追加答案

【问题标题】：Clone image objects and append克隆图像对象并追加
【发布时间】：2021-09-20 18:43:27
【问题描述】：

我有一个图像变量，我想将其附加到 3 个不同的 div。我尝试将 .clonenode(true) 添加到对象的末尾，但这不起作用。一直发生的事情是它进入了最后一个调用它的附加语句的 div，因为只有一个变量。我试图避免制作多个变量，因为这只是我的代码的较小规模版本。

const div1 = document.querySelector('div1');
const div2 = document.querySelector('div2');
const div3 = document.querySelector('div3');
const img = document.createElement('img');
img.src = 'foo.png';
img.style.width = '32px';

function append(){
    div1.appendChild(img);
    div2.appendChild(img);
    div3.appendChild(img);
}

【问题讨论】：

你检查图片路径是否正确？？
检查下面的 URL 以在 JavaScript 中克隆图像。 stackoverflow.com/questions/5694986/…

标签： javascript append

【解决方案1】：

我尝试将 .clonenode(true) 添加到对象的末尾，但没有成功。

什么对象？

尝试在每个appendChild() 呼叫中对img 使用它。这就是您需要返回克隆的地方。

const div1 = document.querySelector('div1');
const div2 = document.querySelector('div2');
const div3 = document.querySelector('div3');
const img = document.createElement('img');
img.src = 'foo.png';
img.style.width = '32px';

function append(){
  div1.appendChild(img.cloneNode(true));
  div2.appendChild(img.cloneNode(true));
  div3.appendChild(img.cloneNode(true));
}

【讨论】：