javascript - 如何将新元素附加到两个不同的位置 JavaScript ES6

Question

我的目标是将新元素附加到两个不同的位置。我有两个 div，ID 为 div1 和 div2。我想将新创建的 span 元素附加到两个 div。

document.querySelector('#div1').appendChild(span);

这工作正常，但问题是这样的

document.querySelector('#div2').appendChild(span);

当运行第二个 appendChild 时，它会从 div1 中删除跨度。如何将 span 元素添加到这两个位置？

(为了可视化执行，我添加了 setTimeout)

const span = document.createElement('span');
span.appendChild(document.createTextNode('Test'));

document.querySelector('#div1').appendChild(span);
setTimeout(() => {
  document.querySelector('#div2').appendChild(span);
}, 3000)

#div1 {
  padding: 3px;
  background: red;
}

#div2 {
  padding: 3px;
  background: green;
}

<div id="div1"></div>
<div id="div2"></div>

Answer 1

在现有跨度上使用cloneNode方法:

更多信息:

https://developer.mozilla.org/en-US/docs/Web/API/Node/cloneNode

const span = document.createElement('span');
span.appendChild(document.createTextNode('Test'));

document.querySelector('#div1').appendChild(span);
setTimeout(() => {
  document.querySelector('#div2').appendChild(span.cloneNode(true));
}, 3000)

#div1 {
  padding: 3px;
  background: red;
}

#div2 {
  padding: 3px;
  background: green;
}

<div id="div1"></div>
<div id="div2"></div>