如何仅使用 javascript 在另外两个 div 之间添加一个 div 内容块？

Question

我正在尝试添加一个 div，如下所示

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

在另外两个 div 之间

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

我需要使用 javascript 或 motools 而不是 jquery 来完成这项工作。

Answer 1

您可以使用 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');

这是一个有效的 JS FIDDLE

Answer 2

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

jsfiddle DEMO

如何仅使用 javascript 在另外两个 div 之间添加一个 div 内容块？

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

javascript

mootools