JavaScript nested element loops and append bug?

Question

I have four different elements,

<div id='div1'>One: </div>
<div id='div2'>Two: </div>
<span id='span1'>Test 1</span>
<span id='span2'> and 2</span>

and I want to append both span elements to both div elements by doing,

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

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

The expected output is,

<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>

But for some reason the span elements aren't appended to both div elements, but only to the last div. Any reason why, and how can I fix this?

Because they are the same child, and will instead be moved from one to the other. You need to clone the span's to get two in each div — Asons
– Asons, Commented Jul 9, 2018 at 14:24
You are telling to append specific elements to a specific element. You have to create new elements or clone them and append. — schogges
– schogges, Commented Jul 9, 2018 at 14:25

Asons · Accepted Answer · 2018-07-09 14:39:21Z

2

As I commented, as they are the same child, they will be moved from one element to the other.

You need to clone the span's to get two in each div.

Here is a sample

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>

edited Jul 9, 2018 at 14:39

answered Jul 9, 2018 at 14:34

Asons

87.7k12 gold badges119 silver badges175 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Jacques Marais Over a year ago

Thanks, I have accepted this answer because of it providing a way to use elements with set id attributes.

C14L · Accepted Answer · 2018-07-09 14:28:04Z

2

You would need to clone the span

currentDiv.appendChild(currentSpan.cloneNode());

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

But in your case, that would lead to duplicated id attributes. If possible, use classes instead.

answered Jul 9, 2018 at 14:28

C14L

12.6k4 gold badges43 silver badges53 bronze badges

1 Comment

Jacques Marais Over a year ago

Thanks, this works when I set the deep argument to true.

Ankit · Accepted Answer · 2018-07-09 14:35:27Z

1

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

answered Jul 9, 2018 at 14:35

Ankit

513 bronze badges

Collectives™ on Stack Overflow

JavaScript nested element loops and append bug?

3 Answers 3

1 Comment

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

1 Comment

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related