在前端开发中，我们常常需要操作DOM元素来实现各种功能。JS提供了多种方法用于增删改查DOM元素，其中before()是一种常用的方法，它可以在指定元素的前面插入一个新的子元素。本文将详细介绍如何使用before()方法并提供示例代码。
什么是before()方法？
before()方法是DOM元素的原型链方法之一，它可以在指定元素的前面插入一个新的子元素。该方法接受一个参数，即要插入的元素对象或HTML字符串，可以插入任意类型的元素，包括文本和注释等。
如何使用before()方法？
要使用before()方法，在指定的父元素上调用该方法，并传入要插入的元素对象或HTML字符串作为参数。例如，以下代码会在id为"parent"的元素中插入一个新的div元素：
--- ------ - ---------------------------------- --- ------ - ------------------------------ ----------------------
如果要插入的元素是HTML字符串，只需将其作为参数传递给before()方法即可。例如，以下代码会在id为"parent"的元素中插入一个包含文本内容的p元素：
--- ------ - ---------------------------------- ---------------------------------
before()方法的学习和指导意义
before()方法在前端开发中应用广泛，能够实现多种功能。例如，在一个列表中插入一个新的项目、在一个表单中插入新的表单项等。理解和掌握before()方法不仅可以提高我们的开发效率，还能帮助我们更好地操作DOM元素，对于我们的前端开发工作来说十分重要。
示例代码
以下是一个示例代码，它会在页面加载时向id为"parent"的元素中插入三个新的div元素：
--------- -----
------
------
--------------------------------
-------
------
---- ------------
------------
------
--------
--- ------ - ----------------------------------
--- ---- - - -- - - -- ---- -
--- ------ - ------------------------------
---------------- - ----------- - -- - ---
----------------------
-
---------
-------
-------运行该代码后，页面上将会显示如下的内容：
---------- ---------- ---------- -----
来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/31531