CODEWITHSUNDEEP
javascriptmootools
Hello Universe
Hello Universe

Reputation: 3302

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

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.

Upvotes: 1

Views: 371

Answers (2)

Samurai
Samurai

Reputation: 3729

var div_before = document.getElementById("w3");
var new_div = document.getElementById("topheader");
div_before.parentNode.insertBefore(new_div, div_before.nextSibling);

jsfiddle DEMO

Upvotes: 2

Sameer Azazi
Sameer Azazi

Reputation: 1497

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

Upvotes: 2

Related Questions