往ul 添加一个n个li元素 并加内容 并且绑定事件
时间: 2024-03-16 07:46:40 浏览: 134
jQuery动态添加li标签并添加属性和绑定事件方法
5星 · 资源好评率100%
好的,以下是一个将n个li元素添加到ul中、给li元素添加内容和绑定事件的示例代码:
HTML代码:
```html
<ul id="myList"></ul>
```
JavaScript代码:
```javascript
var ul = document.getElementById("myList");
var n = 5; // 假设要添加5个li元素
for (var i = 0; i < n; i++) {
var li = document.createElement("li");
li.innerHTML = "这是第" + (i + 1) + "个列表项";
li.addEventListener("click", function() {
console.log("点击了li元素:" + this.innerHTML);
});
ul.appendChild(li);
}
```
这里,我们首先获取了id为"myList"的ul元素,然后使用for循环动态创建了n个li元素。在每次循环中,我们使用createElement()方法创建了一个li元素,然后使用innerHTML属性给li元素设置了文本内容。接着,使用addEventListener()方法为li元素绑定了一个点击事件,当用户点击li元素时,会在控制台中输出一条信息。最后,使用appendChild()方法将li元素添加到ul元素中。
阅读全文