在前端开发中，JavaScript（JS）函数扮演着至关重要的角色，它们允许我们封装可重用的代码块，以执行各种任务，如响应用户输入、操作DOM元素、发送异步请求等。下面，我将通过一个具体的示例来演示一个前端JS函数的编写和使用，该函数将用于在网页上动态地添加和删除列表项。
示例：动态管理列表项
假设我们有一个简单的HTML页面，上面有一个按钮用于添加列表项，每个列表项旁边都有一个“删除”按钮用于移除该项。
HTML 部分
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>动态列表管理</title>
</head>
<body>
<h2>我的待办事项</h2>
<ul id="todoList"></ul>
<button onclick="addItem()">添加项目</button>
<script src="script.js"></script>
</body>
</html>
JavaScript 部分 (script.js)
// 初始化一个计数器，用于生成唯一的列表项ID
let itemCount = 0;
// 函数：添加列表项
function addItem() {
// 生成唯一的ID
const uniqueId = `item-${
++itemCount}`;
// 创建新的列表项元素
const newItem = document.createElement('li');
newItem.id = uniqueId;
newItem.textContent = `项目 ${
itemCount}`; // 设置文本内容
// 创建删除按钮
const deleteButton = document.createElement('button');
deleteButton.textContent = '删除';
deleteButton.onclick = function() {
// 绑定点击事件到删除函数，并传递当前列表项的ID
removeItem(this.parentNode.id);
};
// 将删除按钮添加到列表项中
newItem.appendChild(deleteButton);
// 将列表项添加到列表中
const todoList = document.getElementById('todoList');
todoList.appendChild(newItem);
}
// 函数：删除列表项
function removeItem(itemId) {
// 通过ID找到对应的列表项并移除
const itemToRemove = document.getElementById(itemId);
if (itemToRemove) {
itemToRemove.remove();
}
}
// 可选：页面加载时自动添加一些初始列表项
window.onload = function() {
for (let i = 0; i < 5; i++) {
addItem();
}
};
代码解析
HTML 部分：定义了一个无序列表（
<ul>）和一个按钮。列表用于显示待办事项，按钮用于触发添加新项目的操作。JavaScript 部分：
addItem()函数用于创建新的列表项（<li>）和一个删除按钮（<button>），并将它们添加到页面上。每个列表项都有一个唯一的ID，以便之后可以被单独识别。removeItem(itemId)函数接受一个ID作为参数，用于找到并移除对应的列表项。- 使用
document.createElement()来创建新的DOM元素。 - 使用
textContent属性来设置元素的文本内容。 - 使用
appendChild()方法将新元素添加到其父元素中。 - 使用
remove()方法从DOM中移除元素。 window.onload事件监听器用于在页面加载完成后自动添加一些初始的列表项。
注意
- 这个示例演示了如何使用JS函数和DOM操作来动态地管理网页上的内容。
- 在实际应用中，你可能还需要考虑更多的细节，比如列表项的样式、用户输入的验证、以及与服务器端的交互等。
- 为了提高代码的可维护性和可读性，可以将相关的功能封装在更小的函数或对象中，或者使用现代前端框架（如React、Vue或Angular）来组织代码。
