#npm 包 html-code-gen 使用教程
前言：
在前端的开发过程中，我们时常需要生成一些 HTML 代码，比如说自定义模板、图表等。手写 HTML 代码是一件繁琐的工作，而且经常容易出错，需要花费大量时间去调试。这时候我们可以使用 html-code-gen 这个 npm 包来简化这个工作。
##html-code-gen 简介
html-code-gen 是一个基于 Node.js 的开源工具，可以帮助我们在项目中快速生成 HTML 代码。这个工具提供了多种 HTML 元素的生成方法。我们可以通过配置参数来生成需要的 HTML 代码。
##html-code-gen 安装
使用 npm 命令来安装 html-code-gen：
npm install html-code-gen
##html-code-gen 使用
我们可以使用 html-code-gen 来生成各种 HTML 元素，比如说：div、a 标签、ul、li 等。在使用这个工具之前，我们需要引入这个包：
const htmlCodeGen = require('html-code-gen');###生成 div 元素
我们可以使用 htmlCodeGen.createDiv() 方法来生成一个 div 元素，如下：
-- -------------------- ---- -------
----- ------- - -----------------------
--- -------
------ ------------
------ -
------ -------
------- --------
---------------- ----------
------- ---- ----- --------
-
---
---------------------上面代码将会生成以下 HTML 代码：
<div id="main" class="container" style="width: 100%; height: 500px; background-color: #eeeeee; border: 1px solid #999999;"></div>
###生成 a 标签
我们可以使用 htmlCodeGen.createLink() 方法来生成一个 a 标签，如下：
const linkHtml = htmlCodeGen.createLink({
href: 'https://www.baidu.com',
target: '_blank',
text: '百度一下'
});
console.log(linkHtml);上面代码将会生成以下 HTML 代码：
<a href="https://www.baidu.com" target="_blank">百度一下</a>
###生成 ul 和 li 元素
我们可以使用 htmlCodeGen.createUnorderedList() 方法来生成一个 ul 元素，同样可以使用 htmlCodeGen.createListItem() 来生成 li 元素。如下：
-- -------------------- ---- -------
----- ----- - -
-
----- -------
--
-
----- --------
--
-
----- --------
-
--
----- -------- - ---------------------------------
------ -------
------ ------
---------- ------
---
----------------------上面代码将会生成以下 HTML 代码：
<ul class="list">
<li class="item">Apple</li>
<li class="item">Banana</li>
<li class="item">Cherry</li>
</ul>###生成表格元素
我们可以使用 htmlCodeGen.createTable() 方法来生成一个表格元素，如下：
-- -------------------- ---- -------
----- ---- - -
-
----- --------
---- ---
------- --------
--
-
----- ------
---- ---
------- ------
--
-
----- ----------
---- ---
------- ------
-
--
----- --------- - -------------------------
-------- -------- ------ ----------
----- -----
-------- -
-------- ---------
----- ------
-
---
-----------------------上面代码将会生成以下 HTML 代码：
-- -------------------- ---- -------
-------
-------
----
--- ------------------------
--- -----------------------
--- --------------------------
-----
--------
-------
----
--- -----------------------
--- --------------------
--- ------------------------
-----
----
--- ---------------------
--- --------------------
--- ----------------------
-----
----
--- -------------------------
--- --------------------
--- ----------------------
-----
--------
--------###生成 form 元素
我们可以使用 htmlCodeGen.createForm() 方法来生成一个 form 元素，如下：
-- -------------------- ---- -------
----- -------- - ------------------------
------- -------
------- ----------
------- -
-
------ -------
----- -------
----- ------
--
-
------ --------
----- --------
----- -------
--
-
------ -----------
----- -----------
----- ----------
--
-
----- ---------
------ --------
-
-
---
----------------------上面代码将会生成以下 HTML 代码：
-- -------------------- ---- -------
----- ------------- -----------------
-----
-------------------
------ ----------- ------------
------
-----
--------------------
------ ------------ -------------
------
-----
-----------------------
------ --------------- ----------------
------
------ ------------- ---------------
-------##总结
通过上面的例子，我们可以看出，使用 html-code-gen 这个工具可以大大简化我们生成 HTML 代码的工作，并且减少出错的可能性。当然，这个工具并不是万能的，如果我们需要更加复杂的 HTML 代码，还需要结合手写代码的方式来完成。
示例代码及使用方法请见本文。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/70569