DIV above another DIV automatically

Question

I need a script that will add a div above another div when the page loads, and I need to be able to edit the DIV's html coding directly inside the Javascript code (for a userscript). Currently, I have it replacing a div, and it's kind of a mess.

if (document.getElementById ('category_45'))
{
    var wdiv = document.getElementById ('category_45');
    wdiv.innerHTML = '<div id=shoutboxfix><iframe id=reloader name=reloader scrolling=yes frameborder=0 width=1000px height=350px src=http://forums.digitalwarfare247.com/index.php?/shoutbox/index.php#category_shoutbox>';
    wdiv.innerHTML += '<input type="button" value="Refresh ^" onclick="parent.top.reloader.location.reload(true);" /></div>';
    wdiv.innerHTML += '<br />';
}

The div I need the new div above's ID is 'category_45', and the HTML coding is <iframe id=reloader name=reloader scrolling=yes frameborder=0 width=1000px height=350px src=http://forums.digitalwarfare247.com/index.php?/shoutbox/index.php#category_shoutbox>

Thanks to anyone that helps.

Answer 1

Have you considered JQuery? http://api.jquery.com/before/

Answer 2

Or perhaps Mootools ?

myThirdElement.inject(mySecondElement, 'before');

source: http://mootools.net/docs/core/Element/Element#Element:inject