How to add a block of div contents in between two other divs using javascript only?

Question

I am trying to add a div like below

        <div id="topheader" class="topheader">
            <ul>
                <li>
                    <a href="#" title="Library">Library</a>
                </li>
                <li>
                    <a href="#" title="My Uni">My Uni</a>
                </li>
                <li>
                    <a href="#" title="Staff Intranet">Staff Intranet</a>
                </li>
            </ul>
        </div>

in between two other divs

<div id="w3"> 
.... new div to be here ...
<div id="head"> 

I need to get this done using javascript or motools and not jquery.

Answer 1

You can do it using inject

var headEle = document.id('head');

new Element('div', {
    "class": 'topheader',
    "id": 'topheader',
    html: '<ul><li><a href="#" title="Library">Library</a></li><li><a href="#" title="My Uni">My Uni</a></li><li><a href="#" title="Staff Intranet">Staff Intranet</a></li></ul>'
}).inject(headEle, 'before');

Here is a working JS FIDDLE