CODEWITHSUNDEEP
javascriptdom
Prashant Singh
Prashant Singh

Reputation: 3793

Modifying DOM of a webpage

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 !

Upvotes: 0

Views: 122

Answers (4)

showi
showi

Reputation: 486

Liked pointed out there's answer for prepending, Insert sibling node in JS and How can I implement prepend and append with regular JavaScript?

<html>
<head>
<script type="text/javascript">
function add(myClass) {
    var root = document.getElementById('abc');
    var last = null;
    for (var i = 0; i < root.childNodes.length; i++) {
        var child = root.childNodes[i];
        if (!child.className) continue;        
        var pat = new RegExp(myClass,'g');    
        var m = pat.exec(child.className);      
        if (!m) {
          if (!last) continue;
            var div = document.createElement('div');
            div.appendChild(document.createTextNode('After A content'));    
            root.insertBefore(div, last.nextSibling);        
            break;            
        }
        last = child;                     
    }
}
</script>
</head>
<body>
<div id='abc'>
  <div class='d'>Some contents here </div>
  <div class='b'>Some other contents </div>
  <div class='a'>Content A</div>
  <div class='a'>Content A1</div>
  <div class='a'>Content A2</div>
  <div class='a'>Content A3</div>
  <div class='b'>Some other contents </div>
</div>
<a href="#" onclick="add('a')">Add div</a>
</body>
</html>

Upvotes: 1

Mihai P.
Mihai P.

Reputation: 9357

I think this is what you are looking for http://jsfiddle.net/cExRS/
The code is this one

element = document.getElementById('abc');
element.innerHTML = "<div class='a'>Some other contents here </div>" + element.innerHTML;

You should really try jquery, it makes things a lot easier

Upvotes: 1

HellaMad
HellaMad

Reputation: 5374

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.

Upvotes: 1

marctrem
marctrem

Reputation: 850

This question is a duplicate :s

How can I implement prepend and append with regular JavaScript?

It's called prepending

Upvotes: 0

Related Questions