如何在正文标签中插入之前（）元素？

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

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

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

出于某种原因，我对您的代码进行了现代化改造：)

Answer 2

你必须在某些东西之前插入。 document.getElementsByTagName('body')[0] 是 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

Answer 3

现代解决方案 - prepend

document.body.prepend(p)

这是 vanilla JS，比以前的选项更具可读性。它目前在all modern browsers 可用。

您可以直接添加字符串，尽管它们不会是“p”标签

parent.prepend("This text!")

相关的 DOM 方法

1. Read More - parent.append
2. Read More - child.before 和 child.after
3. Read More - child.replaceWith

Mozilla Documentation

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>