Javascript Node.AppendChild() in loop losing elements

Question

I have a basic function that is used to remove items from one div and place them in another (drag and drop widget). When moving multiple items, the appendchild function seems to be altering the list in place and losing elements.

function resetm2mAlerts(dbField) {
    selectBox = document.getElementById(`${dbField}_selected`).childNodes; //List of nodes to remove
    availBox = document.getElementById(`${dbField}_available`); //destination of nodes
    console.log(selectBox); //validating contents before loop
    for(index of selectBox){
        availBox.appendChild(index); //appending items to destination
    }
}

Relevant HTML:

<div class="form-group">
    <label for="id_default_operating_schedule">Day Of Week</label>
    <div id="default_operating_schedule" class="col-md-12 nopadding twocolumndroppable">
       <div id="default_operating_schedule_selected" class="col-md-6 droppable available ui-droppable">
         <div id="default_operating_schedule_code_1" class="col_md_5 draggable bg-primary ui-draggable ui-draggable-handle" data-id="1">Sunday</div>
         <div id="default_operating_schedule_code_4" class="col_md_5 draggable bg-primary ui-draggable ui-draggable-handle" data-id="4">Wednesday</div>
      </div>
    
      <div id="default_operating_schedule_available" class="col-md-6 droppable ui-droppable">
        <div id="default_operating_schedule_code_2" class="col_md_5 draggable bg-primary ui-draggable ui-draggable-handle" data-id="2">Monday</div>
        <div id="default_operating_schedule_code_3" class="col_md_5 draggable bg-primary ui-draggable ui-draggable-handle" data-id="3">Tuesday</div>
        <div id="default_operating_schedule_code_5" class="col_md_5 draggable bg-primary ui-draggable ui-draggable-handle" data-id="5">Thursday</div>
        <div id="default_operating_schedule_code_6" class="col_md_5 draggable bg-primary ui-draggable ui-draggable-handle" data-id="6">Friday</div>
        <div id="default_operating_schedule_code_7" class="col_md_5 draggable bg-primary ui-draggable ui-draggable-handle" data-id="7">Saturday</div>
    </div>
  </div>
</div>

Contents of selectBox simple example: [<div element 1>, <div element 4>] after the first (and only) iteration of the for loop, <div element 1> is moved to availBox, the loop terminates and the contents of selectBox remains [<div element 4>].

I have attempted an indexed forloop which provides either index out of bounds or the same result of items being left in select box.

A reverse iteration of an indexed forloop moves everything as necessary, the major focus of the question is more why does append alter the list dynamically and cause this side effect.

The html is generated by Django so it's not going to provide much assistance here. The issue is PURELY in the JavaScript. — jjulian91
– jjulian91, Commented Jul 8, 2020 at 3:10
We can't really help without seeing the general HTML structure. Could you copy over the relevant HTML at the time of the error? — Unmitigated
– Unmitigated, Commented Jul 8, 2020 at 3:13

Bren · Accepted Answer · 2020-07-08 03:39:10Z

0

You need to cast the child nodes to an array so it's iterable.

function resetm2mAlerts(dbField) {
    selectBox = document.getElementById(`${dbField}_selected`).childNodes; //List of nodes to remove
    availBox = document.getElementById(`${dbField}_available`); //destination of nodes

    [...selectBox].forEach(child => availBox.appendChild(child));
}

edited Jul 8, 2020 at 3:39

answered Jul 8, 2020 at 3:34

Bren

6155 silver badges15 bronze badges

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

1 Comment

jjulian91 Over a year ago

That works. So from what I am gathering is that the HTMLcollection (generated by parent.children) or the NodeList[] (generated by parent.childNodes) are pointer based data structures where dynamic modification takes place during the iteration thus reducing the number of elements in the structure on each iteration?

Collectives™ on Stack Overflow

Javascript Node.AppendChild() in loop losing elements

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related