JS简单实例之删除增加节点

来源：互联网发布：石桥铺数据恢复编辑：程序博客网时间：2024/05/18 02:43

利用JS的基本概念实现删除增加节点的功能。适用于小白使用。

<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title>JIEDIAN</title><script>function del(){var lis = document.getElementsByTagName('li');var lastli = lis[lis.length-1];lastli.parentNode.removeChild(lastli);//删除节点的时候，找到父元素，用removechild来删除}function add(){var li = document.createElement('li');//创建一个节点var txt = document.createTextNode('雷电'); //给li中填写如文字li.appendChild(txt);//填入文字document.getElementsByTagName('ul')[0].appendChild(li);//找到li的父节点ul，并且appendChild里面}</script></head><body><input type="button" value="删除最后一个li" onclick = "del();">  <!-- //删除节点 --><input type="button" value="增加一个节点" onclick = "add();"><!-- //增加节点 --><input type="button" value="增加雾雪霜" onclick = "add2()"><!-- //暴力增加节点 --><input type="button" value="增加雨" onclick = "add3()"><ul><li>春</li><li>夏</li><li>秋</li><li>冬</li></ul><script>function add2(){var ul = document.getElementsByTagName('ul')[0];ul.innerHTML = '<li>雾</li><li>雪</li><li>霜</li>';  //暴力增加节点 使用 innerHTML}function add3(){var ul = document.getElementsByTagName('ul')[0];alert(ul.innerHTML);ul.innerHTML += '<li>雨</li>';}</script></body></html>

0 0