js动态添加与删除ul中的li_IT百科

1、使用jquery脚本库，因此先引入jquery脚本文件。

2、html代码里，就是一个ul列表，里面有二个img控件，还有一个按钮。要注意的是给ul加了一个样式名。

3、使用jquery，先为按钮添加一个点击事件。

4、在点击事件函数里，我们直接使用js代码就能获取到img控件了，var imgs = $(".jy_ul li img")

这就是使用jquery的方便，ul列表的样式名，然后按层次 li img的控件名，就能获取到图片控件了。

5、用alert输入图片的src属性来验证获取到的数据是否准确。因为有两个图片控件，所以代码里获取到的是一个数组，我们输出第二个图片的src。

6、运行页面，可以看到有二个图片和一个按钮，点击按钮。

7、点击后d出了第二张图片的src属性，对比代码，数据正确。

jquery对动态加载的li添加click事件，事件无法触发时设置出现了问题，解决方法为：

1、新建html文件。

2、创建输入框和按钮。

3、预览效果如图。

4、接下来需要引入jquery.js。

5、设置输入框 keydown 事件和click 事件。

6、按钮点击触发事件。

7、click按钮按下效果如图。

这是使用js增加li的示例，供您参考：

<!doctype html>

<html>

<head>

<title>js增添li元素</title>

</head>

<body>

<li>点击这里增加一个li行</li>

</ul>

var cnt = 1 // 用于行计数

function add() {

var elem_li = document.createElement('li') // 生成一个 li元素

elem_li.innerHTML = '这是增加的一行' + cnt ++ // 设置元素的内容

document.getElementById('ul1').appendChild(elem_li) // 添加到UL中去

}

</script>

</body>

</html>

运行结果：

欢迎分享，转载请注明来源：内存溢出

js动态添加与删除ul中的li