Wrapping an Element using Pure JavaScript !!

Question

Hello,

I have a series of div tags on my page & I want to wrap them all into a container.

<div class = "c" >blah blah </div>
<div class = "c" >blah blah </div>
<div class = "c" >blah blah </div>

I want to wrap all the above tags into a container as follows

<div class="container" >
    <div class = "c" >blah blah </div>
    <div class = "c" >blah blah </div>
    <div class = "c" >blah blah </div>
</div>

I can do it using jQuery, I want learn how this is done in Pure Javascript ( I mean without any library or framework ) . Can someone share the code to warp elements in javascript.

Thank you !!

Answer 1

You can do like this:

// create the container div
var dv = document.createElement('div');
// get all divs
var divs = document.getElementsByTagName('div');
// get the body element
var body = document.getElementsByTagName('body')[0];

// apply class to container div
dv.setAttribute('class', 'container');

// find out all those divs having class C
for(var i = 0; i < divs.length; i++)
{
   if (divs[i].getAttribute('class') === 'C')
   {
      // put the divs having class C inside container div
      dv.appendChild(divs[i]);
   }
}

// finally append the container div to body
body.appendChild(dv);

Answer 2

sAc has answereed excellently. Personally I'd use this (possibly more complex - depends on your preference) slightly alternative method:

* snip *

... which apparently doesn't function correctly in IE. In IE, it will only work on AJAX-ed documents (which isn't what the OP here is looking for obviously), a limitation I was previously unaware of. Apologies.

Answer 3

If you're target browsers support it, the document.querySelectorAll uses CSS selectors:

var targets = document.querySelectorAll('.c'),
  head = document.querySelectorAll('body')[0],
  cont = document.createElement('div');
cont.class = "container";
for (var x=0, y=targets.length; x<y; x++){
  con.appendChild(targets[x]);
}
head.appendChild(cont);

Answer 4

You also can use the wrap-function of prototype...

see: http://api.prototypejs.org/dom/element/wrap/