21 DOM操作之创建和删除DOM元素
在上一篇中，我们了解了如何选择和修改DOM元素。现在，我们将进一步学习如何使用JavaScript创建和删除DOM元素。这些操作是动态操作网页内容的基础，因此掌握它们非常重要。
创建DOM元素
在JavaScript中，我们可以使用document.createElement()方法来创建一个新的DOM元素。然后，我们可以通过修改元素的属性、样式和文本内容来设置它的特性。最后，我们需要将创建的元素插入到文档中，以使其显示在页面上。
创建元素的基本步骤：
- 使用
document.createElement()创建元素。 - 设置元素的属性、样式和内容。
- 将元素插入到DOM中。
示例：创建一个新的<div>元素
下面是一个简单的例子，展示如何添加一个新的<div>元素到页面中：
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>创建DOM元素示例</title>
</head>
<body>
<button id="addDiv">添加Div</button>
<div id="container"></div>
<script>
document.getElementById('addDiv').addEventListener('click', function() {
// 第一步：创建元素
const newDiv = document.createElement('div');
// 第二步：设置元素的属性和内容
newDiv.textContent = '这是一个新创建的div元素。';
newDiv.style.border = '1px solid black';
newDiv.style.padding = '10px';
newDiv.style.marginTop = '10px';
// 第三步：将元素插入到DOM中
document.getElementById('container').appendChild(newDiv);
});
</script>
</body>
</html>
在这个例子中，当按钮被点击时，程序会创建一个新的<div>元素，并将其添加到页面上的#container中。你可以看到新创建的<div>元素会在容器中显示。
删除DOM元素
除了创建DOM元素外，我们还可以通过JavaScript来删除它们。删除DOM元素通常使用parentNode.removeChild()方法或element.remove()方法。
删除元素的基本步骤：
- 选择要删除的元素。
- 使用合适的方法从DOM中删除元素。
示例：删除一个<div>元素
我们在前面的例子中添加了新的<div>元素，现在我们可以添加一个功能来删除最近添加的<div>元素：
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>删除DOM元素示例</title>
</head>
<body>
<button id="addDiv">添加Div</button>
<button id="removeDiv">删除Div</button>
<div id="container"></div>
<script>
document.getElementById('addDiv').addEventListener('click', function() {
const newDiv = document.createElement('div');
newDiv.textContent = '这是一个新创建的div元素。';
newDiv.style.border = '1px solid black';
newDiv.style.padding = '10px';
newDiv.style.marginTop = '10px';
newDiv.classList.add('removable'); // 给每个newDiv一个class
document.getElementById('container').appendChild(newDiv);
});
document.getElementById('removeDiv').addEventListener('click', function() {
const container = document.getElementById('container');
const lastDiv = container.lastElementChild; // 获取最后一个子元素
if (lastDiv) {
// 使用remove()方法删除最后一个div
lastDiv.remove();
} else {
alert('没有可以删除的元素！');
}
});
</script>
</body>
</html>
在这个示例中，点击“添加Div”按钮会创建一个新的<div>元素，而点击“删除Div”按钮将删除最后一个添加的<div>元素。通过lastElementChild属性，我们可以获取容器的最后一个子元素，然后使用remove()方法将其删除。
总结
通过这篇教程，我们学习了如何使用JavaScript创建和删除DOM元素。创建和删除元素是动态网页开发的基本技能，通过这些操作，我们可以实现丰富的用户交互。
在下一篇中，我们将继续探索事件处理的相关内容，深入理解事件的概念以及如何有效地处理用户的互动。
