Question

假设我的页面上有两个DIV。

<body>
<div id="d1"></div>
<div id="d2"></div>
</body>

我想使用JavaScript动态创建一个新的DIV，并将它放在 d1 和 d2 之间。如果我使用appendChild方法，则将新DIV放在最后。

现在我只能考虑削减身体的innerHTML并将新的DIV附加到所需的位置。还有更好的方法吗？

Answer 1

document.body.insertBefore( 
    newNode, 
    document.getElementById('d2') 
);

Answer 2

有Node.insertBefore method在另一个节点之前插入一个节点：

var newNode = document.createElement("div"),
    d2 = document.getElementById("d2");
d2.parentNode.insertBefore(newNode, d2);

Answer 3

对于DOM操作，jQuery API提供了各种有用的方法。以下是其中一些： -

insertBefore（），insertAfter（），append（），appendTo（），prepend（），prependTo（）等。这些函数提供了对在网页中特定位置插入DOM元素的更多控制。