JavaScript中增删改

最新推荐文章于 2022-05-17 23:32:14 发布

plannothing

最新推荐文章于 2022-05-17 23:32:14 发布

阅读量181

点赞数

分类专栏： js基础教程文章标签： js javascript dom

原文链接：https://blog.csdn.net/qq_45783660/article/details/116767681

版权

js基础教程专栏收录该内容

101 篇文章 0 订阅

订阅专栏

<html>
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
	<title>Untitled Document</title>
	<link rel="stylesheet" type="text/css" href="style/css.css" />
	<script type="text/javascript">
	
		window.onload = function() {
			
			//创建一个"广州"节点,添加到#city下
			myClick("btn01",function(){
				//创建广州节点 <li>广州</li>
				//创建li元素节点
				/*
				 * document.createElement()
				 * 	可以用于创建一个元素节点对象，
				 * 	它需要一个标签名作为参数，将会根据该标签名创建元素节点对象，
				 * 	并将创建好的对象作为返回值返回
				 */
				var li = document.createElement("li");
				
				//创建广州文本节点
				/*
				 * document.createTextNode()
				 * 	可以用来创建一个文本节点对象
				 *  需要一个文本内容作为参数，将会根据该内容创建文本节点，并将新的节点返回
				 */
				var gzText = document.createTextNode("广州");
				
				//将gzText设置li的子节点
				/*
				 * appendChild()
				 * 	 - 向一个父节点中添加一个新的子节点
				 * 	 - 用法：父节点.appendChild(子节点);
				 */
				li.appendChild(gzText);
				
				//获取id为city的节点
				var city = document.getElementById("city");
				
				//将广州添加到city下
				city.appendChild(li);
				
				
			});
			
			//将"广州"节点插入到#bj前面
			myClick("btn02",function(){
				//创建一个广州
				var li = document.createElement("li");
				var gzText = document.createTextNode("广州");
				li.appendChild(gzText);
				
				//获取id为bj的节点
				var bj = document.getElementById("bj");
				
				//获取city
				var city = document.getElementById("city");
				
				/*
				 * insertBefore()
				 * 	- 可以在指定的子节点前插入新的子节点
				 *  - 语法：
				 * 		父节点.insertBefore(新节点,旧节点);
				 */
				city.insertBefore(li , bj);
				
				
			});
			
			
			//使用"广州"节点替换#bj节点
			myClick("btn03",function(){
				//创建一个广州
				var li = document.createElement("li");
				var gzText = document.createTextNode("广州");
				li.appendChild(gzText);
				
				//获取id为bj的节点
				var bj = document.getElementById("bj");
				
				//获取city
				var city = document.getElementById("city");
				
				/*
				 * replaceChild()
				 * 	- 可以使用指定的子节点替换已有的子节点
				 * 	- 语法：父节点.replaceChild(新节点,旧节点);
				 */
				city.replaceChild(li , bj);
				
				
			});
			
			//删除#bj节点
			myClick("btn04",function(){
				//获取id为bj的节点
				var bj = document.getElementById("bj");
				//获取city
				var city = document.getElementById("city");
				
				/*
				 * removeChild()
				 * 	- 可以删除一个子节点
				 * 	- 语法：父节点.removeChild(子节点);
				 * 		
				 * 		子节点.parentNode.removeChild(子节点);
				 */
				//city.removeChild(bj);
				
				bj.parentNode.removeChild(bj);
			});
			
			
			//读取#city内的HTML代码
			myClick("btn05",function(){
				//获取city
				var city = document.getElementById("city");
				
				alert(city.innerHTML);
			});
			
			//设置#bj内的HTML代码
			myClick("btn06" , function(){
				//获取bj
				var bj = document.getElementById("bj");
				bj.innerHTML = "昌平";
			});
			
			myClick("btn07",function(){
				
				//向city中添加广州
				var city = document.getElementById("city");
				
				/*
				 * 使用innerHTML也可以完成DOM的增删改的相关操作
				 * 一般我们会两种方式结合使用
				 */
				//city.innerHTML += "<li>广州</li>";
				
				//创建一个li
				var li = document.createElement("li");
				//向li中设置文本
				li.innerHTML = "广州";
				//将li添加到city中
				city.appendChild(li);
				
			});
			
			
		};
		
		function myClick(idStr, fun) {
			var btn = document.getElementById(idStr);
			btn.onclick = fun;
		}
		
	
	</script>
	
</head>
<body>
	<div id="total">
		<div class="inner">
			<p>
				你喜欢哪个城市?
			</p>

			<ul id="city">
				<li id="bj">北京</li>
				<li>上海</li>
				<li>东京</li>
				<li>首尔</li>
			</ul>
			
		</div>
	</div>
	<div id="btnList">
		<div><button id="btn01">创建一个"广州"节点,添加到#city下</button></div>
		<div><button id="btn02">将"广州"节点插入到#bj前面</button></div>
		<div><button id="btn03">使用"广州"节点替换#bj节点</button></div>
		<div><button id="btn04">删除#bj节点</button></div>
		<div><button id="btn05">读取#city内的HTML代码</button></div>
		<div><button id="btn06">设置#bj内的HTML代码</button></div>
		<div><button id="btn07">创建一个"广州"节点,添加到#city下</button></div>
	</div>
</body>
</html>