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

Posted 2021-03-29

我有四个不同的元素，

<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。有什么理由，我该如何解决这个问题？

答案

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

另一答案

你需要克隆span

currentDiv.appendChild(currentSpan.cloneNode());

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

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

另一答案

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嵌套元素循环并附加bug？的主要内容，如果未能解决你的问题，请参考以下文章

循环遍历嵌套的 js 对象并使用 Jquery 使用自定义 html 附加 div

带有嵌套for循环的Javascript多维数组-无法正常工作

使用JavaScript循环嵌套解决各种图形

每秒记录一个嵌套循环元素至少一分钟？在 Javascript 中？

使用类循环遍历每个元素并附加其文本JQUERY

如何在 Nightwatch 测试的自定义命令中添加嵌套函数 javascript - forEach - 循环遍历元素