如何将新元素追加到两个不同的位置JavaScript ES6
提问于 2018-11-05 15:41:39
我的目标是将一个新元素添加到两个不同的位置。我有两个div2，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>
回答 3
Stack Overflow用户
发布于 2018-11-05 15:47:10
在现有跨度上使用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>
Stack Overflow用户
发布于 2018-11-05 15:52:21
一个元素不能存在于DOM中的两个位置。您可以创建两次节点或克隆de节点
document.querySelector('#div1').appendChild(createSpan());
setTimeout(() => {
document.querySelector('#div2').appendChild(createSpan());
}, 3000)
function createSpan () {
const span = document.createElement('span');
span.appendChild(document.createTextNode('Test'));
return span
}或
const span = createSpan();
document.querySelector('#div1').appendChild(span);
setTimeout(() => {
document.querySelector('#div2').appendChild(span.cloneNode(true));
}, 3000)
function createSpan () {
const span = document.createElement('span');
span.appendChild(document.createTextNode('Test'));
return span
}Stack Overflow用户
发布于 2018-11-05 15:52:05
DOM元素只能是一个且只能是其他DOM元素的子元素。将已创建的span元素附加到第一个div，然后将其附加到第二个div。常识是这样的，跨度随后从第一个div中删除，并移到第二个div中。您可以通过执行以下操作来实现您想要的功能。
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>
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/53157557
复制相关文章
腾讯云开发者
