CODEWITHSUNDEEP
javascripthtmldom
Madhu
Madhu

Reputation: 1186

How to add a dynamically created node(tag) at the desired location?

Suppose I have two DIVs on my page.

<body>
<div id="d1"></div>
<div id="d2"></div>
</body>

I want to create a new DIV dynamically using JavaScript and place it between d1 and d2. If I use the appendChild method the new DIV is placed at the end.

Right now I can only think of paring the innerHTML of the BODY and appending the new DIV at the desired location. Is there a better way?

Upvotes: 0

Views: 154

Answers (3)

Pawan Mishra
Pawan Mishra

Reputation: 7268

For DOM manipulation , jQuery API offers various helpful methods.Following are some of them :-

insertBefore() , insertAfter() , append() , appendTo() , prepend() , prependTo() etc . These functions provide more control over insertion of DOM elements at specific locations in web page.

Upvotes: 0

Gumbo
Gumbo

Reputation: 655499

There is the Node.insertBefore method to insert a node before another:

var newNode = document.createElement("div"),
    d2 = document.getElementById("d2");
d2.parentNode.insertBefore(newNode, d2);

Upvotes: 1

Quentin
Quentin

Reputation: 944020

insertBefore

document.body.insertBefore( 
    newNode, 
    document.getElementById('d2') 
);

Upvotes: 2

Related Questions