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