Need to Call Javascript Function on Blogger

Question

A Stackoverflow member kindly provided a JavaScript code to call the use of a function immediately after the first "/a" appears on a post of a Blogger site, basically, to insert an advertisement box right under the opening picture of an post and flowing on the left side of the article.

The problem is that it only works if I insert the JavaScript code right under the end of the body and after the div tag.

If I add the JavaScript code anywhere else, including right above the end head, it doesn't work.

As is it stands, it doesn't always load the ad / box (marked with XXXXXX) on all browsers, and on the ones it does, it takes up a lot of time to load.

I've tried all sorts of things, I haven't managed to solve it. I would appreciate some help.

The code that was given to me, follows below:

 <div id="payload" class="left">
XXXXXXXX
</div>

<div id="target">
Content within the target.
</div>

<data:post.body/><div style='clear: both;'/> <!-- clear for photos floats -->
</div>
<script type='text/javascript'>
function insertAfter(addition,target) {
var parent = target.parentNode;

if (parent.lastChild == target) {
    parent.appendChild(addition);  
} else {
    parent.insertBefore(addition,target.nextSibling);
}
}

var payload = document.getElementById("payload");
var target = document.getElementById("target");

var anchors = target.getElementsByTagName("a");

if (anchors.length > 0) {
insertAfter(payload,anchors[0]);
}
</script> 

Answer 1

if you are allowed to use jquery you can write in the head

 $(function() {
     $("#payload").after($("#target").find("a").first());
 });