在开发前端项目的时候，经常需要动态创建 DOM 元素，手动用 JavaScript 拼接 HTML 代码很麻烦，而使用 @jimpick/crel 包可以方便快捷地创建 DOM 元素。
安装
使用 npm 包管理工具全局安装 @jimpick/crel 包：
--- ------- -- -------------
在项目中使用 @jimpick/crel 包：
--- ------- ------------- ------
使用
基本使用
引入 @jimpick/crel 包：
------ ---- ---- ----------------
创建一个 div 元素：
----- --- - ------------
创建一个具有 class 名称的 div 元素：
----- --- - ----------- - ------ --------- ---
创建一个具有多个属性的 p 元素：
----- - - --------- - ------ ---------- --- ------- ------ --------- ---
向元素中添加文本：
--------- ------ ---------
向元素中添加子元素：
----------- --------- ------ ----------
将元素添加到 DOM 中：
-------------------------------
高级使用
使用数组
使用数组添加多个子元素：
---------- - ---------- ----- ---- ---------- ----- ---- ---------- ----- ---- ---
使用自定义函数
使用自定义函数添加复杂的子元素：
----------- -------------- -
--------- ------- -----------
--------- -
----- ----
-------- ----------- -
-------------------
-------------------- -- -----------
-
-- ------ -----
-- --------定义模板字符串
定义模板字符串来动态创建复杂的元素：
----- ---------- - ------ -- -
---- ----------------
--------- ------------
-- -------------- ------
------
--
----------- - ---------- ------------------ ---示例代码
HTML 代码：
--------- -----
----- ----------
------
----- ----------------
--------- ---- -----------
-------
------
------- ----------------------
-------
-------JavaScript 代码：
------ ---- ---- ----------------
----- --- - ----------- - ------ --------- ---
--------- ------ ---------
----------- --------- ------ ----------
------
------------ ------ --------
------ -
------ ----
---------- -------
--
---
---------- -
---------- ----- ----
---------- ----- ----
---------- ----- ----
---
----------- -------------- -
--------- ------- -----------
--------- -
----- ----
-------- ----------- -
-------------------
-------------------- -- -----------
-
-- ------ -----
-- --------结语
@jimpick/crel 包使用简单，但功能强大，可以快速地创建复杂的 DOM 元素，提高开发效率。关于该包的更多信息可以参考官方文档。
来源：JavaScript中文网 ，转载请联系管理员！ 本文地址：https://www.javascriptcn.com/post/600668e3d9381d61a3540a79