在前端开发中，我们常常需要动态生成 HTML 元素并为其绑定事件，同时还需要注意字符转义问题，以确保正确传递参数。在本文中，我们将通过一个实例来展示如何使用 JavaScript 实现这些操作。
实例概述
我们将创建一个简单的待办事项列表，允许用户添加、编辑和删除事项。具体包括以下功能：
- 在页面上显示已有的事项列表；
- 允许用户添加新的事项；
- 允许用户编辑已有事项；
- 允许用户删除已有事项。
实现步骤
第一步：动态生成 HTML 元素
首先，我们需要在页面上创建一个空的列表元素，用于存放事项。可以使用以下 HTML 代码来创建：
<ul id="todolist"></ul>
接下来，我们将使用 JavaScript 动态向该元素中添加事项。假设我们有以下数据：
const todoList = [
{id: 1, content: '完成 JavaScript 实战课程'},
{id: 2, content: '学习 React 框架'},
{id: 3, content: '写一篇技术文章'}
]我们可以使用 Array.prototype.map 方法循环遍历数据，并使用模板字符串动态创建每个事项的 HTML 元素。代码如下：
const todoListEl = document.querySelector('#todolist')
todoListEl.innerHTML = todoList.map(todo => {
return `<li data-id="${todo.id}">
<span>${todo.content}</span>
<button class="edit-btn">编辑</button>
<button class="delete-btn">删除</button>
</li>`
}).join('')这段代码将循环遍历 todoList 数组中的每个对象，创建一个带有数据属性的 li 元素，并将其添加到 ul#todolist 元素中。
第二步：绑定事件及传参
现在我们已经成功地创建了待办事项列表，接下来是向列表添加事件处理程序，以允许用户添加、编辑和删除事项。在此过程中，我们还需要注意如何正确地传递参数。
添加事件处理程序
要为“添加”按钮添加事件处理程序，我们可以使用以下代码：
-- -------------------- ---- -------
----- ------ - ----------------------------------
-------------------------------- -- -- -
----- ------- - --------------------
-- --------- -
----- -- - --------------- - -
------------------ ---------
----- ---- - ----------------------------
--------------- - --
-------------- - -
-----------------------
------- ----------------------------
------- ------------------------------
-
----------------------------
-
--此代码将为“添加”按钮添加点击事件处理程序。当用户单击该按钮时，会弹出一个提示框，要求用户输入新的事项内容。如果用户输入了内容，则会在 todoList 数组中添加一个新对象，并将其动态添加到列表中。
编辑事件处理程序
要为“编辑”按钮添加事件处理程序，我们可以使用以下代码：
-- -------------------- ---- -------
------------------------------------ - -- -
----- ------- - -----------------------------
-- --------- -
----- ---- - ---------------------
----- -- - -------------------------
----- ---- - ------------------ -- ------- --- ---
----- ------- - -------------------- -------------
-- -------- -- ------- --- ------------- -
------------ - -------
-------------------------------------- - -------
-
-
--此代码将为列表元素添加点击事件处理程序，监听“编辑”按钮的点击事件。当用户单击该按钮时，会弹出一个提示框，要求用户输入修改后的
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/2129