js 简单的【图书增删效果】案例_用js设计从原由书籍上增加书籍的方法-优快云博客

本文链接：https://blog.youkuaiyun.com/qq2981118661/article/details/127815554

效果图:
在这里插入图片描述

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>图书增删效果</title>
	</head>
	<body>
		
		请输入内容:<input type="text" id="i1">
		<button id="btn1">追加内容</button>		
		<button id="btn2">点击删除子元素</button>
		<ul id="box"></ul>
		
		<script>
			var btn1=document.getElementById("btn1");
			
			btn1.onclick=function(){
				//获得输入框的内容
				var text=document.getElementById("i1").value;
				//创建li标签
				var li =document.createElement("li");	
				//创建文本节点
				var textNode=document.createTextNode(text);		
				//追加内容
				li.appendChild(textNode);				
				//给div追加内容
				var box=document.getElementById("box");
				box.appendChild(li);
				document.getElementById("i1").value="";
			}
			
			var btn2=document.getElementById("btn2");
			btn2.onclick=function(){
				//获得父元素
				var ul=document.getElementById("box");
				//获得所有li元素
				var liArr=document.getElementsByTagName("li");
				//遍历
				for(var i=0;i<liArr.length;i++){
					//通过父元素,删除子元素
					ul.removeChild(liArr[i]);
					i--;
				}
			}
		</script>
	</body>
</html>