I'm writing a script that needs to move a wrapping node element around on the page. I find that when I do this, I remove the previously wrapped children. How do I unnest the children of a node, so that I can move that parent node elsewhere?

I was thinking something like this:

  var parg = document.getElementById("blah");

  if (parg.hasChildNodes())
   {
     var children = parg.childNodes;
     while (children.length > 0)
     {
      parg.insertBefore(parg.firstChild);
      parg.removeChild(parg.firstChild);
     };
   };

The line that I'm guessing is the problem is the "insertBefore" logic.

I'm writing a script that needs to move a wrapping node element around on the page. I find that when I do this, I remove the previously wrapped children. How do I unnest the children of a node, so that I can move that parent node elsewhere?

I was thinking something like this:

  var parg = document.getElementById("blah");

  if (parg.hasChildNodes())
   {
     var children = parg.childNodes;
     while (children.length > 0)
     {
      parg.insertBefore(parg.firstChild);
      parg.removeChild(parg.firstChild);
     };
   };

The line that I'm guessing is the problem is the "insertBefore" logic.

• javascript
• removechild

• great question! You really express the problem clearly – toddmo Commented Sep 7, 2016 at 17:14

2 Answers 2

insertBefore operates on an element node and takes two arguments, the new node, and the node the new node will precede.

function unwrap(who){
 var pa= who.parentNode;
 while(who.firstChild){
  pa.insertBefore(who.firstChild, who);
 }
}

//test

unwrap(document.getElementById("blah"));

You'll need to iterate over your first-level children and assign their parent to the "wrapper" element's parent.

Something like this, perhaps:

if ( parg.hasChildNodes() ) {
     var children = parg.childNodes;

     for ( child in children ) {
        child.parentNode = parg.parentNode;
     }
}