在前端开发中，我们经常需要动态生成 HTML 代码来渲染页面。在 ES6 中，我们可以使用模板字符串来生成动态 HTML 代码，让代码更加简洁、易读和易维护。
什么是模板字符串
模板字符串是 ES6 中新增的一种字符串类型，可以使用反引号（`）包裹，支持在字符串中插入变量和表达式。
模板字符串的语法如下：
`string text ${expression} string text`其中，${expression} 表示插入一个表达式的值。
如何使用模板字符串生成动态 HTML 代码
使用模板字符串生成动态 HTML 代码的步骤如下：
- 使用模板字符串定义 HTML 代码的模板。
- 在模板中插入变量或表达式。
- 使用
document.createElement创建 HTML 元素。 - 使用
innerHTML或appendChild将 HTML 代码插入到页面中。
下面是一个示例代码：
-- -------------------- ---- -------
----- ---- - -
- ----- -------- ---- -- --
- ----- ------ ---- -- --
- ----- ---------- ---- -- --
--
----- --------- - -------------------------------------
----- -------- - -
----
--------------- -- -
----
----------- -------------------
---------- ------------------
-----
------------
-----
--
----- ------- - ------------------------------
----------------- - ---------
-------------------------------在这个示例代码中，我们首先定义了一个数组 data，它包含了一些数据。然后，我们使用模板字符串定义了一个 HTML 代码的模板，其中使用了 ${} 语法插入了变量和表达式。最后，我们使用 document.createElement 创建了一个 div 元素，并将生成的 HTML 代码插入到了这个元素中，最后将这个元素插入到页面中。
总结
使用模板字符串生成动态 HTML 代码可以让代码更加简洁、易读和易维护。在实际开发中，我们可以使用模板字符串来渲染列表、表格、表单等复杂的页面元素。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/65057c3f95b1f8cacd1f2205