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

最新推荐文章于 2023-10-29 09:43:43 发布

Xiao_Tommy

最新推荐文章于 2023-10-29 09:43:43 发布

阅读量483

点赞数

分类专栏： IT--前端

本文链接：https://blog.csdn.net/xiao_tommy/article/details/53183732

版权

IT--前端专栏收录该内容

18 篇文章 0 订阅

订阅专栏

利用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>