在现代 Web 开发中，JavaScript 在使网页具有交互性和动态性方面发挥着至关重要的作用。JavaScript 最重要的功能之一是DOM操作，它允许您实时修改网页的结构、内容和样式。通过操作 DOM，您可以动态地创建和删除 HTML 元素，从而让您的网站对用户更具吸引力。
对于初学者来说，了解如何动态创建和移除 HTML 元素是一项基础技能。它能让你创建交互式用户体验，例如动态生成列表、添加表单字段或根据用户操作更新内容。
您将学到什么
读完本指南后，您将能够：
了解 DOM 以及 JavaScript 如何与其交互。
动态地创建新的 HTML 元素。
根据特定条件删除现有元素。
将这些技术应用于实际用例，例如将商品添加到购物车或构建动态待办事项列表。
理解 DOM 和选择元素
文档对象模型 (DOM) 是 HTML 和 XML 文档的编程接口。它将页面表示为树形结构，其中每个节点对应于 HTML 文档中的一个元素或一段内容。JavaScript 与 DOM 交互来操作这些元素及其内容。
选择 DOM 元素
在创建或移除元素之前，必须先选择现有元素。您可以使用各种 DOM 方法来实现这一点。以下是选择元素的最常用方法：
let elementById = document.getElementById('myElement'); // By ID
let elementsByClass = document.getElementsByClassName('myClass'); // By Class
let elementsBySelector = document.querySelector('.myClass'); // Using a CSS selector
let allElements = document.querySelectorAll('div'); // Select all div elements这些方法允许您选择页面上的元素进行进一步操作，例如附加新元素或删除现有元素。
动态创建 HTML 元素
JavaScript 允许您使用 方法来创建新的 HTML 元素createElement()。创建元素后，您可以在将其附加到 DOM 之前修改其属性，例如其内容、类或属性。
示例：创建新div元素
让我们首先创建一个新div元素并将其附加到网页正文。
// 创建一个新的div元素
let newDiv = document.createElement('div');
// 在div中添加内容
newDiv.innerHTML = 'This is a dynamically created div';
// 在div中添加一个类进行样式设置
newDiv.classList.add('new-class');
// 将新div添加到body
document.body.appendChild(newDiv);发生了什么：
document.createElement('div')创建一个新div元素。
.innerHTML设置新元素的内容。
.classList.add('new-class')为样式目的分配一个类div。
.appendChild(newDiv)将新创建的添加div到网页正文。
示例：创建新列表项
假设你有一个任务列表，并且想要动态添加一个新的列表项。你可以这样做：
HTML源代码：
< ul id="taskList" > < li >Task 1< /li > < li >Task 2< /li > < /ul >
JavaScript源代码：
// 选择列表
let taskList = document.getElementById('taskList');
// 创建新列表项
let newItem = document.createElement('li');
// 设置列表项的内容
newItem.textContent = 'Task 3';
// 将新项目添加到列表中
taskList.appendChild(newItem);elementToDelete这将从页面中删除具有该 ID 的元素。
示例：使用removeChild()
如果要从父元素中删除特定的子元素，请使用removeChild()。例如，要删除列表中的第二项：
// 选择列表和子元素
let list = document.getElementById('taskList');
let itemToRemove = list.getElementsByTagName('li')[1];
// 删除第二个项目//删除所选项目
itemlist.removeChild(itemToRemove);这会从列表中删除“任务 2”。
实际应用
现在您已经了解了如何创建和删除元素，让我们看一些这些技术可以派上用场的实际应用。
示例 1：添加新表单字段
如果您正在构建一个用户可以动态添加字段的表单，JavaScript 可以帮助您创建输入元素来响应用户操作。
let form = document.getElementById('form');
let addButton = document.getElementById('addFieldButton');
addButton.addEventListener('click', () => {
let newInput = document.createElement('input');
newInput.type = 'text';
newInput.placeholder = '
New Input Field';
form.appendChild(newInput);
});示例 2：构建动态待办事项列表
创建一个动态待办事项列表，用户可以在其中添加和删除任务，这是练习 DOM 操作的好方法。
let addButton = document.getElementById('addTaskButton');
let taskList = document.getElementById('taskList');
addButton.addEventListener('click', () => {
let newTask = document.createElement('li');
newTask.textContent = 'New Task';
taskList.appendChild(newTask);
});您还可以使用 removeChild() 允许用户动态删除任务。
结论
掌握JavaScript DOM 操作对于创建交互式动态 Web 应用程序至关重要。能够根据用户操作创建和删除 HTML 元素，让您能够完全掌控网页内容。无论您是构建表单、待办事项列表，还是添加交互式功能，这些技巧都能帮助您提升网站的响应速度和吸引力。
现在您已经掌握了如何选择元素、创建新元素以及移除旧元素，您已经踏上了构建现代交互式 Web 应用程序的征程。继续尝试这些技巧，您将更有信心应对更复杂的 DOM 任务。