Question

The structure of a webpage is like this :-

<div id='abc'>
  <div class='a'>Some contents here </div>
  <div class='b'>Some other contents< </div>
</div>

My aim is to add this after the class a in above structure.

<div class='a'>Some other contents here </div>

So that final structure looks like this :-

  <div id='abc'>
      <div class='a'>Some contents here </div>
      <div class='a'>Some other contents here </div>
      <div class='b'>Some other contents< </div>
    </div>

Can there be a better way to do this using DOM properties. I was thinking of naive way of parsing the content and updating.

Please comment if I am unclear in asking my doubt !

Answer 1

Create the desired element, give it the desired attributes, children, innerHTML, etc, and then append it:

var parent = document.getElementById('abc'),
    ele = document.createElement('div');

ele.setAttribute('class', 'a');
ele.innerHTML = "Some other contents here";

parent.appendChild(ele);​

Fiddle

You can be lazy and just set the innerHTML of #abc, but in my opinion this method is more flexible.