Modifying DOM of a webpage

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 !

what have you tried so far? Have you researched how to add an element to the DOM? — I Hate Lazy
– I Hate Lazy, Commented Dec 6, 2012 at 4:57
I was trying to get the content of abc div using getELementById. Then I was parsing the content to add the value at correct position — Prashant Singh
– Prashant Singh, Commented Dec 6, 2012 at 4:59
yeah, the DOM isn't a string. It's a tree structure of nodes. After you get the parent by its id, you need to create a new element and insert it relative to one of its children. — I Hate Lazy
– I Hate Lazy, Commented Dec 6, 2012 at 5:01

HellaMad · Accepted Answer · 2012-12-06 05:05:23Z

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.

answered Dec 6, 2012 at 5:05

HellaMad

5,4326 gold badges34 silver badges54 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Mihai P. · Accepted Answer · 2012-12-06 05:06:59Z

1

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

answered Dec 6, 2012 at 5:06

Mihai P.

9,3673 gold badges40 silver badges50 bronze badges

Comments

Community · Accepted Answer · 2017-05-23 11:55:57Z

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>

Community · Accepted Answer · 2017-05-23 12:21:19Z

0

This question is a duplicate :s

How can I implement prepend and append with regular JavaScript?

It's called prepending

edited May 23, 2017 at 12:21

CommunityBot

11 silver badge

answered Dec 6, 2012 at 5:02

marctrem

8509 silver badges15 bronze badges

2 Comments

marctrem Over a year ago

Why the down vote? The answer is there. Just trying to help over here

Patrick Over a year ago

This is better off as a comment

Collectives™ on Stack Overflow

Modifying DOM of a webpage

4 Answers 4

Comments

Comments

Comments

2 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

Comments

Comments

Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related