前言
在前端开发中，插入元素到指定位置时，一般都会使用 insertBefore 或 insertAfter 方法。但是这两种方法仅仅只能插入到相应元素的前面或后面，如果我们需要在相应元素前面或后面插入新的元素，则需要使用 insertAdjacentHTML 方法。
然而，使用原生的 insertAdjacentHTML 存在一些问题，例如语法较为复杂，容易出错等。因此，本文介绍一款方便易用的 npm 包——insert-adjacent-simple。
简介
insert-adjacent-simple 是一款小巧但功能强大的 npm 包，可以帮助我们更方便地以简单易懂的方式插入元素到指定位置。它的核心方法是 insertAdjacent。
insertAdjacent 方法非常简单，只需要传入 3 个参数：要插入的内容、插入的位置以及相应的元素即可，语法如下：
insertAdjacent(position, content, element)
其中，position 表示插入的位置，可以取以下四个值：
'beforebegin': 在元素的前面；'afterbegin': 在元素内部的第一个子元素前面；'beforeend': 在元素内部的最后一个子元素后面；'afterend': 在元素的后面。
content 是要插入的内容，可以是字符串或者 DOM 元素，例如：
const str = '<div>插入的字符串</div>';
const ele = document.createElement('div');
ele.innerText = '插入的元素';element 则是需要插入的目标元素。
安装
insert-adjacent-simple 是一款 npm 包，在使用前需要先进行安装。在终端中输入以下命令即可安装：
npm install insert-adjacent-simple
使用方法
使用 insert-adjacent-simple 插入元素非常简单，只需要按照以下步骤进行即可：
- 在需要使用的地方导入
insertAdjacent方法：
import insertAdjacent from 'insert-adjacent-simple'
- 调用
insertAdjacent方法，将所需参数传入其中即可，例如：
-- -------------------- ---- ------- ----- --- - -------------------- ----- --- - ------------------------------ ------------- - -------- ----- --------- - ---------------------------------- -- ------- ----------------------------- ---- ----------- -- ----- ----- ---------- - ----------------------------------- -- ------- ---------------------------- ---- ------------ -- ----
示例代码
-- -------------------- ---- -------
--------- -----
----- ----------
------
----- --------------- --
----------------------------- ------------
-------
------
-------------------------- ---------
---- ------------------------
---- -----------------------------
------- --------------
------ -------------- ---- -------------------------
----- --- - --------------------
----- --- - ------------------------------
------------- - --------
----- --------- - ----------------------------------
----------------------------- ---- -----------
----- ---------- - -----------------------------------
---------------------------- ---- ------------
---------
-------
-------总结
本文详细介绍了使用 npm 包 insert-adjacent-simple 插入元素的使用方法，相对于原生的 insertAdjacentHTML 方法更加方便易用，适合用于大多数场景。希望本文对大家学习和使用 insert-adjacent-simple 有所帮助。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/600562a481e8991b448dfdfe