使用纯JavaScript在</body>标签前插入元素

Question

24

<html>
  ...
  <body>
    ...
  // element should be inserted here
  </body>
</html>

我对原生JavaScript并不是很熟悉，一直在使用jQuery。到目前为止，我尝试了这个方法，但是它获取的是在<head>和<body>中间的元素。

var bodyTag = document.getElementsByTagName('body')[0];
bodyTag.parentNode.insertBefore(myElement, bodyTag);

- jviotti

2

Vanilla不是一个JS库，它只是JavaScript :) - hgoz

哦，是的！http://vanilla-js.com/ - Rodney

2个回答

3

insertAdjacentHTML 方法可以在指定位置插入新的 HTML 元素，而不影响原有的 HTML 结构。你可以使用以下四种参数来确定插入的位置：beforebegin、afterbegin、beforeend 和 afterend。

<!-- beforebegin -->
    <p>
        <!-- afterbegin -->
        foo
        <!-- beforeend -->
    </p>
<!-- afterend -->

根据您的情况：

document.body.insertAdjacentHTML("beforeend", myElement);
document.body.insertAdjacentHTML("beforeend", "<h2>Hello World!</h2>");

请记住，insertAdjacentHTML 接受原始的 HTML。您可以使用 myElement.outerHTML 传递 HTML 节点。

您可以在此处阅读有关 insertAdjacentHTML 的更多信息：MDN

如果您想直接插入一个 HTML 节点，请使用： document.body.appendChild(myElement);

- Florin

请阅读[答案]并编辑您的答案，包含一个解释为什么这段代码实际上可以解决手头的问题。请记住，您不仅在解决问题，还在教育提问者和未来的读者。 - Adriaan

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- dfsq · Accepted Answer

很简单。使用appendChild方法，它可以写得非常简短：

document.body.appendChild(myElement);