web前端页面怎么写，HTML5新增和删除元素，字节跳动面试真题
warning:
这篇文章距离上次修改已过193天，其中的内容可能已经有所变动。
在HTML5中，新增了一些API来处理DOM元素的增加和删除，例如document.createElement()用于创建新元素，Node.appendChild()用于添加元素，而Node.removeChild()或Element.remove()用于删除元素。
以下是一个简单的例子，展示了如何在HTML5中添加和删除元素：
<!DOCTYPE html>
<html>
<head>
<title>添加和删除元素示例</title>
</head>
<body>
<div id="container">
<!-- 这里将显示添加的元素 -->
</div>
<button id="add">添加元素</button>
<button id="remove">删除元素</button>
<script>
// 添加元素的函数
function addElement() {
var container = document.getElementById('container');
var newElement = document.createElement('p');
newElement.textContent = '这是一个新添加的段落。';
container.appendChild(newElement);
}
// 删除元素的函数
function removeElement() {
var container = document.getElementById('container');
if (container.children.length > 0) {
container.removeChild(container.lastChild);
}
}
// 绑定事件监听器
document.getElementById('add').addEventListener('click', addElement);
document.getElementById('remove').addEventListener('click', removeElement);
</script>
</body>
</html>在这个例子中，我们定义了两个按钮，一个用于添加元素，一个用于删除元素。当用户点击"添加元素"按钮时，会触发addElement函数，向container元素添加一个新的<p>元素。当用户点击"删除元素"按钮时，会触发removeElement函数，从container元素删除最后一个子元素。如果容器为空，删除操作将不会执行。
评论已关闭