JavaScript嵌套元素循环并附加bug？

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

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

Answer 2

你需要克隆span

currentDiv.appendChild(currentSpan.cloneNode());

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

但在你的情况下，这将导致重复的id属性。如果可能，请改用classes。

Answer 3

You would need to clone the nodes. Modified your code to clone each span before appending to div element. However you might also want to change the attributes value like id.

var div = document.querySelectorAll('div');
var span = document.querySelectorAll('span');

div.forEach(function(currentDiv){
  span.forEach(function(currentSpan){
    currentDiv.appendChild(currentSpan.cloneNode(true));
  });
});