如何在 body 标签中使用 insertBefore() 插入元素？

Question

我正在尝试如下使用JavaScript中的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);

但这将把最后一个p元素添加到body标签关闭前，我应该如何使用它以便在打开时将其添加到顶部？因此，最后添加的元素将是body标签内的第一个元素。

我尝试过：

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

但是 Firebug 显示：

节点未找到" 代码："8

- slemdx

---

尝试使用document.body.prepend。另外，通常最好不要设置innerHTML。使用oldNode.replaceWith(newNode)或设置oldNode.innerText。 - Gibolt

@Gibolt 应该优先使用 textContent 来设置文本。 - alex

Answer 1

您可以使用 firstChild 属性来获取 body 元素的第一个子元素，并将其用作参考。

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

为了现代化你的代码，我进行了修改 :)

- alex

---

你不应该使用 innerHTML 将文本推送到元素中，而应该使用 textContent。 - Persijn

@Persijn 这只是一个例子，而且在2011年你必须在IE中使用 textContent 或 innerText，所以这更方便一些。 - alex

同意，但我已经注释掉了，因为我们不再这样做了。你能改变/编辑它吗？ - Persijn

@Persijn 这就是来自原帖问题的代码，但是我可以进行更改。 - alex

我们难道不是为社区回答问题的吗？而不是为单个用户服务的吗？我们不是一个帮助服务。 - Persijn

Answer 2

现代解决方案 - prepend

document.body.prepend(p)

这是纯原生 JavaScript，比之前的选项更易读。它目前可以在所有现代浏览器中使用。

你可以直接添加字符串，但它们不会成为 'p' 标签。

parent.prepend("This text!")

相关的DOM方法

1. 阅读更多 - parent.append
2. 阅读更多 - child.before和child.after
3. 阅读更多 - child.replaceWith

Mozilla文档

- Gibolt

Answer 3

您需要在某个元素之前插入内容。document.getElementsByTagName('body')[0] 是 body 元素（这种语法可以在所有浏览器中获取 body 元素）¹。如果您想将内容插入到 body 中，您需要在它的第一个元素之前进行插入。可能看起来像这样：

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]);

¹ 在某些浏览器中，它是document.body，在其他浏览器中是document.documentElement等，但在所有浏览器中标签名称都是body。

- KooiInc

---

哪些浏览器不支持 document.body？ - alex

@alex 你说得对，似乎每个浏览器都支持它。我想这只是我记忆中已经逝去的过去的痕迹。 - KooiInc

@Kooilnc 感谢您回复我，我在很多地方都使用了 document.body，有点担心 :P - alex

Answer 4

let li = document.querySelectorAll("li");
let newli = document.createElement("li");
newli.innerText = "7";
li[6].before(newli); //this work as insertBefore()this line add 7 before 8
//li[5].after(newli);

<ul>
  <li>1</li>
  <li>2</li>
  <li>3</li>
  <li>4</li>
  <li>5</li>
  <li>6</li>
  <li>8</li>
  <li>9</li>
  <li>10</li>
</ul>

- Sundar Nagarkoti

---

感谢您提供这段代码片段，它可能会提供一些有限的、即时的帮助。一个适当的解释将极大地提高其长期价值，因为它可以展示为什么这是一个好的解决方案，并使其对未来读者具有其他类似问题更有用。请编辑您的答案以添加一些解释，包括您所做出的假设。 - Dmitriy