当需要向 HTML 页面的 body 标签内插入新的元素时，我们可以使用 JavaScript 中的 insertBefore() 方法。这个方法可以将一个节点插入到另一个节点之前，从而实现在指定位置插入元素的功能。
使用 insertBefore() 方法的基本语法
insertBefore() 方法接受两个参数，分别为要插入的节点和参考节点。其基本语法如下：
parentElement.insertBefore(newNode, referenceNode);
其中，parentElement 代表要插入新节点的父节点，即在哪个节点内进行插入。newNode 是要插入的新节点，referenceNode 则是参考节点，表示新节点应该插入在它之前。
在 body 标签中使用 insertBefore() 方法的示例代码
下面是一个在 body 标签中使用 insertBefore() 方法插入元素的示例代码：
-- -------------------- ---- ------- --------- ----- ------ ------ ---------- -------------- -------------- ------- ------ ------------------ ---------------- --------- ---- ------ - -- ----- ------------ - ---------------------------- -- ---- --- - ---- ------------------------ - ----------- -- ---- ------ ----- ------------- - -------------------------------------- -- ---- ----- ----- ------------- - ----------------------------------------- -- ---- ------------ ------------------------------------------ --------------- ---------- ------- -------
代码中，我们首先创建了一个新的 p 元素，并给它赋值。然后通过 getElementsByTagName() 方法找到了参考节点和父节点，最后调用 insertBefore() 方法将新元素插入到参考节点之前。
总结
使用 insertBefore() 方法可以在 HTML 页面的 body 标签内插入新的元素。要使用这个方法，需要知道其基本语法，并且找到正确的父节点和参考节点。掌握这个方法对于 Web 前端开发是非常有指导意义的。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/27737