CODEWITHSUNDEEP
javascripthtmlprototypejs
Ali
Ali

Reputation: 7493

How to add html after a certain div using Prototype JS?

I want to be able to append divs to my page such that they are appended after a div of a certain class and before teh divs that follow it i.e:

<div class="header">Header DIV</div>
<!-- Want to add using javascript some HTML right here-->
<div class="one-basic-div">...</div>
<div class="one-basic-div">...</div>
<div class="one-basic-div">...</div>
<div class="one-basic-div">...</div>

It is basically raw html I wish to add. How can I do it?

Upvotes: 6

Views: 18933

Answers (2)

Salman Arshad
Salman Arshad

Reputation: 272266

Use the Element.insert method:

document.observe("dom:loaded", function() {
  $$(".header").first().insert({ after: "<p>Some html</p>" });
});
<script src="https://ajax.googleapis.com/ajax/libs/prototype/1/prototype.js"></script>

<div class="header">Header div</div>
<div class="one-basic-div">Other div</div>

Upvotes: 20

karim79
karim79

Reputation: 342685

Use insert:

$$('#header').insert({ 'after' : theHTML });

That should insert it as a sibling after the div with id header.

There are some helpful examples here, the documentation seems to be lacking, somewhat.

Upvotes: 7

Related Questions