Question

Ok I have a page setup that looks like this:

<div class="parent">Content here</div>

I want to grab each div with the class ‘parent’, and make it look like this:

<div class="parent">
<div class="child"></div>
Content Here
<div class="child">
</div>

I know how to loop through each div with the class ‘parent’, except I dont know how to add the ‘child’ div before and after the content. Help?

Answer 1

In browsers that support getElementsByClassName, you can do this:

var parents = document.getElementsByClassName("parent");
for (i=0; i<parents.length; i++){
  var child = document.createElement("div");
  child.setAttribute("class","child");
  parents[i].insertBefore(child, parents[i].firstChild);
  parents[i].appendChild(child);
}

getElementsByClassName is supported by Chrome, Firefox 3+, as well as recent versions of Opera, and Safari. (see http://www.quirksmode.org/dom/w3c_core.html#fivemethods). Unfortunately it is not currently supported by any version of Internet Explorer.

Of course, you can write your own version of getElementsByClassName that works in IE. (Basically it just needs to cycle through each element and add it to the collection if its class attribute matches the specified value.) Or you can get someone else to write it for you, either by using code you find online or just using a framework as prodigitalson suggests.