appendChild() fails when trying to append a value stored in an array

The following code deletes all children of a certain element, besides these listed inside the saved variable.

let rightCol = document.querySelector("#rightCol");
let saved = rightCol.querySelectorAll('._4-u2._3-96._4-u8');
let savedArr = [];

saved.forEach(()=>{
    savedArr.push(saved);
});

rightCol.innerHTML = ''; // Delete all children before retrieving "saved" ones.

for (var i = 0; i < savedArr.length; i++) {
    rightCol.appendChild(savedArr[i]);
};

The code fails with this error:

TypeError: Argument 1 of Node.appendChild does not implement interface Node.

Why the code fails?

There are multiptle errors with your code.

  • querySelectorAll should be executed on document.
  • you are pushing entire array in for each loop.

here is the working copy

let rightCol = document.querySelector("#rightCol");
    let saved = document.querySelectorAll('._4-u2._3-96._4-u8');
    let savedArr = [];

    saved.forEach((s)=>{
        savedArr.push(s);
    });

    rightCol.innerHTML = ''; // Delete all children before retrieving "saved" ones.

    for (var i = 0; i < savedArr.length; i++) {
        rightCol.appendChild(savedArr[i]);
    };

You are pushing your collection array for each element in your selection return instead of the elements

Where your code state .each(()=> on the next line, the argument to push should be this

On each iteration of forEach you are adding the entire saved array to savedArr. You should instead add each item using the parameter passed into the forEach callback.

e.g.

saved.forEach((s)=> {
    savedArr.push(s);
});

Not sure why you're copying the array over to another array here though..