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