添加、删除列表的内容
时间: 2023-08-05 12:04:17 浏览: 74
好的,下面是添加、删除列表内容的代码:
HTML代码:
```html
<ul id="list"></ul>
<input type="text" id="input">
<button id="addBtn">添加</button>
<button id="delBtn">删除</button>
```
JavaScript代码:
```javascript
const list = document.getElementById('list');
const input = document.getElementById('input');
const addBtn = document.getElementById('addBtn');
const delBtn = document.getElementById('delBtn');
addBtn.addEventListener('click', function() {
const text = input.value.trim();
if (text) {
const li = document.createElement('li');
li.textContent = text;
list.appendChild(li);
input.value = '';
}
});
delBtn.addEventListener('click', function() {
const li = list.lastElementChild;
if (li) {
list.removeChild(li);
}
});
```
当用户点击添加按钮时,事件监听器会触发一个函数,该函数会从输入框中获取文本内容,并创建一个新的列表项,并将文本内容作为该列表项的文本内容。然后,将新的列表项添加到列表中,并清空输入框。当用户点击删除按钮时,事件监听器会触发一个函数,该函数会删除列表中的最后一个列表项。