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

但萤火虫表示：

未找到节点“code：”8

Answer 1

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

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等，但在所有浏览器中，标记名为{{1 }}~~

Answer 3

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>

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

3 个答案: