Question

I have a an html code like this

<div>
<p> blah blah </p>
<div class = foo>

//some code

</div>
//some text
</div>

What i want to do by javascript is to add a wrapper div to the inner div with class foo. So that the code becomes something like

<div>
<p> blah blah </p>
<div id = temp>
<div class = foo>

//some code
</div>
</div>
//some text
</div>

Please tell me how to do something like this. Non jquery solutions would be more helpful.. 🙂

Answer 1

Using POJS is pretty simple:

function divWrapper(el, id) {
  var d = document.createElement('div');
  d.id = id;
  d.appendChild(el);
  return d;
}

Make sure you pass it something that can be wrapped in a div (e.g. don’t give it a TR or TD or such).

You’ll need some helper functions, I’m not going to post a getElementsByClassName function here, there are plenty on the web to choose from, a good one should first try qSA, then DOM method, then custom function.

Assuming you have one, consider something like:

function wrappByClass(className) {
  var el, elements = getElementsByClassName(className);

  for (var i = elements.length; i--;) {
    el = elements[i];
    el.parentNode.replaceChild(divWrapper(el, 'foo' + i), el);
  }
}

Edit

On reflection, I prefer the following method. It inserts the wrapper div into the DOM first, then moves the element to be wrapped into it. The above seems to move the element out of the DOM, then wants to use its position in the DOM to insert the new node. It might work, but seems prone to error to me. So here’s a better solution, tested in Safari:

// Quick implementation of getElementsByClassName, just for prototypeing
function getByClassName(className, root) {
  var root = root || document;
  var elements = root.getElementsByTagName('*');
  var result = [];
  var classRe = new RegExp('(^|\\s)' + className + '(\\s|$)');

  for (var i=0, iLen=elements.length; i<iLen; i++) {

    if (classRe.test(elements[i].className)) {
      result.push(elements[i]);
    }
  }
  return result;
}

var divWrapper = (function() {
  var div = document.createElement('div');

  return function(el, id) {
    var oDiv = div.cloneNode(false);
    oDiv.id = id;
    el.parentNode.insertBefore(oDiv, el);
    oDiv.appendChild(el);
  }
}());

function wrapByClassName(className) {
  var els = getByClassName(className);
  var i = els.length;
  while (i--) {
    divWrapper(els[i], 'foo' + i)
  }
}