使用JavaScript:添加、删除列表内容。注:所有事件调用自定义函数完成功能
时间: 2023-12-29 10:03:24 浏览: 85
好的,我可以帮你解决这个问题。那么我们先来看看如何添加列表内容,下面是一个基本的 HTML 代码,其中包含一个空的列表:
```HTML
<ul id="myList">
</ul>
```
接下来,我们可以使用 JavaScript 来添加列表项,可以通过以下代码实现:
```JavaScript
function addItem() {
// 获取列表元素
let myList = document.getElementById("myList");
// 创建新的列表项
let newItem = document.createElement("li");
// 设置新列表项的文本
let textNode = document.createTextNode("New Item");
// 将文本添加到列表项
newItem.appendChild(textNode);
// 将新列表项添加到列表
myList.appendChild(newItem);
}
```
上述代码中,我们首先使用 `document.getElementById` 方法获取列表元素。然后,使用 `document.createElement` 方法创建一个新的列表项,再使用 `document.createTextNode` 方法创建一个文本节点,并将其添加到新列表项中。最后,将新列表项添加到列表中。
接下来,我们来看看如何删除列表项。可以通过以下代码实现:
```JavaScript
function removeItem() {
// 获取列表元素
let myList = document.getElementById("myList");
// 获取最后一个列表项
let lastItem = myList.lastElementChild;
// 从列表中删除最后一个列表项
myList.removeChild(lastItem);
}
```
上述代码中,我们首先使用 `document.getElementById` 方法获取列表元素。然后,使用 `lastElementChild` 属性获取最后一个列表项,并使用 `removeChild` 方法从列表中删除它。
现在,我们已经学会了如何添加和删除列表项。我们可以在 HTML 中添加按钮来触发这些功能,例如:
```HTML
<button onclick="addItem()">Add Item</button>
<button onclick="removeItem()">Remove Item</button>
```
希望这能帮助你解决问题。
阅读全文