我有四个不同的元素,
<div id='div1'>One: </div>
<div id='div2'>Two: </div>
<span id='span1'>Test 1</span>
<span id='span2'> and 2</span>
我想通过执行将两个 span
元素附加到两个 div
元素,
var div = document.querySelectorAll('div');
var span = document.querySelectorAll('span');
div.forEach(function(currentDiv){
span.forEach(function(currentSpan){
currentDiv.appendChild(currentSpan);
});
});
预期的输出是,
<div id='div1'>One:
<span id='span1'>Test 1</span>
<span id='span2'> and 2</span>
</div>
<div id='div2'>Two:
<span id='span1'>Test 1</span>
<span id='span2'> and 2</span>
</div>
但出于某种原因,span
元素并未附加到两个 div
元素,而是仅附加到最后一个 div
。有什么原因吗?我该如何解决?
最佳答案
正如我评论的那样,因为他们是同一个 child ,所以他们将是 moved from one element给另一个。
您需要clone the span
's在每个 div
中得到两个。
这是一个例子
var div = document.querySelectorAll('div');
var span = document.querySelectorAll('span');
div.forEach(function(currentDiv, index){
span.forEach(function(currentSpan){
if (index == 0) {
currentDiv.appendChild(currentSpan);
} else {
var clone = currentSpan.cloneNode(true);
clone.id += index;
currentDiv.appendChild(clone);
}
});
});
<div id='div1'>One: </div>
<div id='div2'>Two: </div>
<span id='span1'>Test 1</span>
<span id='span2'> and 2</span>
关于JavaScript 嵌套元素循环和附加错误?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/51247815/