Replacing HTML content without using jquery

Question

I have a HTML content like this:

some of the string content <font color=blue>Test content <BR><BR><BR>
   <DIV  id='idOfTheDiv'>
     some more goes here
     <P>Test Content</P>
   </DIV>
  </font>

I want to remove the div without removing it's content, so the resultant data should look like

some of the string content `<font color=blue>Test content <BR><BR><BR>`
       some more goes here


         <P>Test Content</P>
      </font>

Please note that i do not want to remove the content of the div, also i do not want to add any unwanted HTML element just to remove the div. I have tried various techniques but none of them is working at the moment.

I tried this replacing the innerHTML but it did'nt worked. I can not use replaceChild, as

<DIV  id='idOfTheDiv'>
     some more goes here
     <P>Test Content</P>
   </DIV>

is a combonation of text plus HTML so CreateTextNode does'nt workks here as it changes all HTML to plain text.

Please suggest. Thanks a Ton..

kapa · Accepted Answer · 2014-03-08 09:49:45Z

1

Loop over the elements inside the div (use childNodes as it also includes text nodes, while children does not).
Place the elements one-by-one before the div using insertBefore.
Remove the div using removeChild.

answered Mar 8, 2014 at 9:49

kapa

78.9k21 gold badges166 silver badges178 bronze badges

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

Comments

dfsq · Accepted Answer · 2014-03-08 09:58:30Z

1

This will do the trick:

var el = document.getElementById('idOfTheDiv');

while (el.childNodes.length) {
    el.parentNode.insertBefore(el.childNodes[0], el);
}
el.parentNode.removeChild(el);

Demo: http://jsfiddle.net/VG5ZF/

el.parentNode.insertBefore(el.childNodes[0], el); moves the first child node outside from element, reducing the length of childNodes NodeList. So in every iteration el.childNodes[0] is going to be next one. Until there are childs.

edited Mar 8, 2014 at 9:58

answered Mar 8, 2014 at 9:52

dfsq

193k26 gold badges244 silver badges261 bronze badges

Collectives™ on Stack Overflow

Replacing HTML content without using jquery

2 Answers 2

Comments

Demo: http://jsfiddle.net/VG5ZF/

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Demo: http://jsfiddle.net/VG5ZF/

Comments

Your Answer

Sign up or log in

Post as a guest

Related