JavaScript 嵌套元素循环和附加错误？

Question

我有四个不同的元素，

<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。有什么原因吗？我该如何解决？

Answer 1

正如我评论的那样，因为他们是同一个 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>