Question

是否可以在<body>的第n个孩子之前/之后添加具有innerHTML的内容？

e.g：

<html>
<head></head>
<body>
<div id="first">First</div>
<div id="second">Second<div id="second_sub"></div></div>
<div id="third">Third</div>
</body>
</html>

我可以在开头添加body.innerHTML = html + body.innerHTML，最后添加body.innerHTML += html但是如何添加，例如，在第二个<div>之前添加？

我不想在<div id="second">上使用替换，因为源更改并且插入应该随机进行。是否有innerHTML的解决方案或我是否需要切换到Dom节点？在旧浏览器中会很慢:(

Answer 1

我现在正在使用它（感谢ajax333221）：

e = document.createElement('div');
e.innerHTML = '<div>... huge content with several sub elements ...</div>';
document.body.insertBefore(e, document.body.childNodes[2]);

这是两种技术的结合。有了这个，我就可以使用快速的.innerHTML，而无需使用createElement（），setAttribute（）等来极大地破坏代码。

欢迎其他解决方案。

Answer 2

您可能正在寻找insertBefore method。它将在给定元素之前插入一个子元素。或者，有appendChild方法，它总是在给定元素的开头推送元素。例子：

<body>
    <span id="elem1">Hello</span>
    <span id="elem2">World</span>
</body>

假设我们正在插入存储在var newElem中的新元素： document.insertBefore(newElem, document.getElementById("elem2"))会给出：

<body>
    <span id="elem1">Hello</span>
    <!-- New element here! -->
    <span id="elem2">World</span>
</body>

document.appendChild(newElem)会给出：

<body>
    <!-- New element here! -->
    <span id="elem1">Hello</span>
    <span id="elem2">World</span>
</body>

body.innerHTML在nth-child之前/之后

2 个答案: