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

您需要克隆 span

currentDiv.appendChild(currentSpan.cloneNode());

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

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

Answer 2

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

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));
  });
});

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

JavaScript nested element loops and append bug?

javascript

foreach

dom

appendchild