在开发前端项目的时候，经常需要动态创建 DOM 元素，手动用 JavaScript 拼接 HTML 代码很麻烦，而使用 @jimpick/crel 包可以方便快捷地创建 DOM 元素。
安装
使用 npm 包管理工具全局安装 @jimpick/crel 包：
npm install -g @jimpick/crel
在项目中使用 @jimpick/crel 包：
npm install @jimpick/crel --save
使用
基本使用
引入 @jimpick/crel 包：
import crel from '@jimpick/crel';
创建一个 div 元素：
const div = crel('div');创建一个具有 class 名称的 div 元素：
const div = crel('div', { class: 'myClass' });创建一个具有多个属性的 p 元素：
const p = crel('p', { class: 'myClass', id: 'myId', title: 'myTitle' });向元素中添加文本：
crel('p', 'Hello World!');向元素中添加子元素：
crel('div', crel('p', 'Hello World!'));将元素添加到 DOM 中：
document.body.appendChild(div);
高级使用
使用数组
使用数组添加多个子元素：
crel('ul', [
crel('li', 'Item 1'),
crel('li', 'Item 2'),
crel('li', 'Item 3'),
]);使用自定义函数
使用自定义函数添加复杂的子元素：
-- -------------------- ---- -------
----------- -------------- -
--------- ------- -----------
--------- -
----- ----
-------- ----------- -
-------------------
-------------------- -- -----------
-
-- ------ -----
-- --------定义模板字符串
定义模板字符串来动态创建复杂的元素：
const myTemplate = (name) => `
<div class="${name}">
<p>Hello, ${name}!</p>
<a href="#">Click me</a>
</div>
`;
crel('div', { innerHTML: myTemplate('John') });示例代码
HTML 代码：
-- -------------------- ---- -------
--------- -----
----- ----------
------
----- ----------------
--------- ---- -----------
-------
------
------- ----------------------
-------
-------JavaScript 代码：
-- -------------------- ---- -------
------ ---- ---- ----------------
----- --- - ----------- - ------ --------- ---
--------- ------ ---------
----------- --------- ------ ----------
------
------------ ------ --------
------ -
------ ----
---------- -------
--
---
---------- -
---------- ----- ----
---------- ----- ----
---------- ----- ----
---
----------- -------------- -
--------- ------- -----------
--------- -
----- ----
-------- ----------- -
-------------------
-------------------- -- -----------
-
-- ------ -----
-- --------结语
@jimpick/crel 包使用简单，但功能强大，可以快速地创建复杂的 DOM 元素，提高开发效率。关于该包的更多信息可以参考官方文档。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/600668e3d9381d61a3540a79