在前端开发中，我们经常需要对某些元素进行一些复杂的操作，比如在元素前后添加一些内容或者样式，通常我们需要手动操作 DOM 元素。但是这种方式不仅繁琐而且容易出错，而且会增加代码量。于是就有人写了一个 npm 包，叫做 before-after.js，它可以帮助我们简化这个操作。
使用方法
before-after.js 的安装非常简单，只需要使用 npm 安装依赖即可：
npm install before-after.js --save-dev
安装完成后，我们就可以在项目中引入 before-after.js：
const { insertBefore, insertAfter } = require('before-after.js');insertBefore
insertBefore 方法可以在一个元素的前面插入一个新的元素：
insertBefore(newNode, referenceNode);
该方法有两个参数：
newNode：要插入的新元素。referenceNode：参考节点，即新元素要插入在该元素的前面。
以下示例代码演示了如何使用 insertBefore 在 div 元素的前面插入一个 p 元素：
-- -------------------- ---- -------
--------- -----
----- ----------
------
----- ----------------
------------------- ----------
-------
---------- -
------ ------
------- ------
------- --- ----- ------
------- - -----
-------- -----
---------------- -------
------------ -------
-
--------- -
---------- -----
------ ----
-
--------- -
---------- -----
------ -----
-
--------
-------
------
---- ---------------
-- -------------------------
------
------- -----------------------------------------------------
--------
----- --------- - -------------------------------------
----- - - ----------------------------
---- - -----------
------------- - ----------
--------------- ----------------------
---------
-------
-------insertAfter
insertAfter 方法可以在一个元素的后面插入一个新的元素：
insertAfter(newNode, referenceNode);
该方法有两个参数：
newNode：要插入的新元素。referenceNode：参考节点，即新元素要插入在该元素的后面。
以下示例代码演示了如何使用 insertAfter 在 div 元素的后面插入一个 p 元素：
-- -------------------- ---- -------
--------- -----
----- ----------
------
----- ----------------
------------------ ----------
-------
---------- -
------ ------
------- ------
------- --- ----- ------
------- - -----
-------- -----
---------------- -------
------------ -------
-
--------- -
---------- -----
------ ----
-
--------- -
---------- -----
------ -----
-
--------
-------
------
---- ---------------
-- -------------------------
------
------- -----------------------------------------------------
--------
----- --------- - -------------------------------------
----- - - ----------------------------
---- - -----------
------------- - ----------
-------------- -----------
---------
-------
-------总结
before-after.js 可以帮助我们简化在元素前后添加内容或样式的操作，上面的示例代码演示了如何使用 insertBefore 和 insertAfter 方法在元素前后插入新的元素。通过学习这篇文章，相信读者对 before-after.js 的使用方法有了更深入的了解，也希望读者在日常开发中能够善加利用这个工具，提高开发效率。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6005541f81e8991b448d1739