如何在body标签中insertBefore（）元素？

Question

我试图在js中使用insertBefore，如下所示：

var p = document.createElement("p");
p.innerHTML = "test1";
document.body.insertBefore(p, null);

var p = document.createElement("p");
p.innerHTML = "test2";
document.body.insertBefore(p, null);

但是这会在body标签关闭之前添加最后一个p元素，我怎么能使用它以便在打开时添加到顶部？所以添加的最后一个元素将是body标签内的第一个元素。

我试过了：

document.body.insertBefore(p, document.getElementsByTagName('body')[0]);

但是萤火虫表明：

找不到节点“代码：”8

Answer 1

您可以使用body属性获取firstChild元素的第一个子元素。然后用它作为参考。

const p = document.createElement("p");
p.textContent = "test1";
document.body.insertBefore(p, document.body.firstChild);

我为你的代码现代化了:)

Answer 2

document.body.prepend(p);

这是（可能）ES7的新增功能。它是vanilla JS，比以前的选项更具可读性。它目前在83% of browsers上有售，包括Chrome，FF和Opera。

您可以直接添加字符串，但它们不是'p'标记

document.body.prepend('This text!');

链接：developer.mozilla.org - Polyfill

Answer 3

你必须在某事之前插入。 document.getElementsByTagName('body')[0]是body元素（语法是在所有浏览器中获取body元素的一个技巧） 1 。如果要插入到正文中，则需要在其第一个元素之前插入。这看起来像这样：

var body   = document.body || document.getElementsByTagName('body')[0],
    newpar = document.createElement('p');
newpar.innerHTML = 'Man, someone just created me!';
body.insertBefore(newpar,body.childNodes[0]);

1 在某些浏览器中它是document.body，其他document.documentElement等，但在所有浏览器中，标记名为body