add html after a certain div - using prototype? How

Question

Hi guys 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>

Its basically raw html I wish to add - how can I do it.

Answer 1

Is this the function you are looking for?

// both should work
$('header').insert({after: '<p>some html</p>'})
$$('#header')[0].insert({after: "<p>some html</p>"});

Answer 2

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.