本文介绍了一种利用JavaScript动态创建HTML元素的方法。通过代码演示了如何生成包含1至10数字的列表项，并实现了一个按钮功能：点击后删除列表中值为单数的项并将最后一个列表项替换为链接。
利用方法 添加一个ul 然后再ul里面添加10个li 并且里面li显示的值为1-10
再写个按钮 点击删除ul里面的单数的li 再将最后一个li替换成a标签
<body>
<button onclick="fn()">按钮</button>
<script>
//第一步创建一个ul
var ul = document.createElement('ul')
//创建10使用for循环
for(var i=0;i<10;i++){
var li = document.createElement('li') //创建一个li
var text = document.createTextNode(i+1)//创建一个文本里面给对应的值 1 --- 10
li.appendChild(text) //将文本添加给li
ul.appendChild(li) //将li添加给ul
}
//将ul添加给body
document.getElementsByTagName('body')[0].appendChild(ul)
function fn(){
//获取最后一个li
// var last = liList[liList.length-1]
var a = document.createElement('a')
ul.replaceChild(a,ul.lastChild)
// 获取所有添加的li 读取里面的值为单数就删除
// var liList = document.getElementsByTagName('li') //获取所有的li
var liList = ul.childNodes
//遍历里面的数据进行删除
for (var index in liList) {
var text = liList[index].innerText //获取里面显示的文本
if(text%2!=0){ //单数
ul.removeChild(liList[index]) //删除单数的li
}
}
}
</script>
</body>
扫一扫
1304
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
