【小案例】DOM 的增删改

最新推荐文章于 2022-11-01 19:27:18 发布

希冀miracle

最新推荐文章于 2022-11-01 19:27:18 发布

阅读量240

点赞数

分类专栏： web前端相关

本文链接：https://blog.csdn.net/weixin_39843945/article/details/89459451

版权

web前端相关专栏收录该内容

10 篇文章 0 订阅

订阅专栏

在这里插入图片描述
1.HTML代码

<body>
	<div id="total">
		<div class="inner">
			<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>

2.JS代码

<script type="text/javascript">
	window.function(){
	//创建一个广州节点，添加到#city下
	myClick("btn01",function(){
		//<li>广州</li>
		//创建li元素节点
		var li=document.createElement("li");
		//创建广州文本节点
		var gzTxt=document.createTextNode("广州");
		//将gzTxt设置li的子节点
		li.appendChild(gzTxt);
		//获取id为city的节点
		var city=document.getElementById("city");
		city.appendChild(li);
	});
	//将广州节点插入到#bj前面
	myClick("btn02", function() {
		//创建一个广州
		var li=document.createElement("li");
		var gzTxt=document.createTextNode("广州");
		li.appendChild(gzTxt);
		//获取id为bj的节点
		var bj=document.getElementById("bj");
		
		//获取city
		var city=document.getElementById("city");
		
		city.insertBefore(li, bj);
		
		bj.insertBefore(gz, bj);
		
	});
	
	//使用广州节点替换#bj节点
	myClick("btn03", function() {
		//创建一个广州
		var li=document.createElement("li");
		var gzTxt=document.createTextNode("广州");
		li.appendChild(gzTxt);
		
		//获取id为bj的节点
		var bj=document.getElementById("bj");
		//获取city
		var city=document.getElementById("city");
		
		city.replaceChild(li, bj);
		
	});
	
	//删除#bj节点
	myClick("btn04", function() {
		//获取id为bj的节点
		var bj=document.getElementById("bj");
		//获取city
		var city=document.getElementById("city");
		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() {
		//获取id为bj的节点
		var bj=document.getElementById("bj");
		bj.innerHTML="富察容音";
		
	});
	
	/* 
		使用innerHTML也可以完成DOM增删改的相关操作
		一般我们会两种方法适合使用
	 */
	//向city中添加广州
	myClick("btn07", function() {
		//获取city
		var city=document.getElementById("city");
		//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.fun;
		
	}
	};
	
</script>

3.图片展示

在这里插入图片描述

希冀miracle

关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
【小案例】DOM 的增删改

DOM 的增删改1.HTML代码<body> <div id="total"> <div class="inner"> <ul id="city"> <li id="bj">北京</li> <li>上海</li> <li>东京</li>...
复制链接

扫一扫