从<body>中获取第一个元素，然后使用insertBefore()插入。

Question

从<body>中获取第一个元素，然后使用insertBefore()插入。

8

我已经做了几个小时了，感觉快要抓狂了。基本上我需要做的是获取出现在body中的第一个元素，然后在它前面插入另一个元素。

我尝试过以下方法来获取第一个元素，但都没有成功（返回undefined或null）

window.document.body.firstChild

document.getElementsByTagName("body").firstChild

document.getElementsByTagName("body")[0].firstChild

window.document.documentElement.childNodes[1].childNodes[0]

我尝试了许多混合匹配之前的片段，也试过仅获取body然后appendChild()，但都没有成功。

非常感谢您的帮助。

- vitaliy

它是在iframe中还是普通文档中？ - danjah

1

document.body.firstChild 没问题。您确定 insertBefore() 的参数顺序正确吗？ - Crescent Fresh

请注意，firstChild将返回第一个节点子元素，它可能是文本节点、注释节点、元素或任何其他节点，因此如果您要附加正文的第一个元素，最好使用firstElementChild。 - Mahmoud Magdy

3个回答

4

你想要这样的东西：

var first = document.body.children[0];
var beforeEle = document.createElement("div");
beforeEle.innerHTML = "I'm the first element in the body!";
document.body.insertBefore(beforeEle, first);

- Alex

“children” 并不是普遍被支持的（例如，它仅在 Firefox 版本 3.5 中引入）。您现在必须使用 childNodes。 - Tim Down

0

我能想到的最优雅的将元素前置到 body 的解决方案是一行代码：

document.body.insertBefore(element, dom.document.body.firstChild)

- user7677469

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- PleaseStand · Accepted Answer

是的，document.body.firstChild 是正确的。你可能忽略了一个事实，即 insertBefore 是父元素的一个方法，它在现有元素之前插入新元素。例如：

var addedElement = document.createElement('p');
addedElement.appendChild(document.createTextNode('Hello, world!'));

var body = document.body;
body.insertBefore(addedElement, body.firstChild);