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

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

现代解决方案 -prepend

document.body.prepend(p)

这是 vanilla JS，比以前的选项更具可读性。它目前在所有现代浏览器中都可用。

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

parent.prepend("This text!")

相关 DOM 方法

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

Mozilla 文档

Answer 3

您必须在某些内容之前插入。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 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>