js DOM增删改方法以及练习(二)

最新推荐文章于 2024-06-13 14:23:28 发布

Zella Zhang

最新推荐文章于 2024-06-13 14:23:28 发布

阅读量344

点赞数

文章标签： javascript dom js

本文链接：https://blog.csdn.net/FemaleHacker/article/details/112789197

版权

文章目录

js DOM增删改方法以及练习

js DOM增删改方法以及练习

DOM增删改方法总结

在这里插入图片描述

DOM增删改方法大练习

<!DOCTYPE html>
<html lang="zh-cn">
<head>
	<meta charset="utf-8" />
	<title>js</title>
	<style>
		*{
			margin:0px;
			padding: 0px;
		}
		#inner{
			float: left;
		}
		#btnlist{
			float: right;
		}
		#city{
			list-style: none;
			text-indent: 10px;
		}
		li{
			float: left;
		}
	</style>
 	<script type="text/javascript">
 		window.onload = function(){
 			/*
 			* 定义函数，为指定元素绑定单击响应函数
 			* idStr:id属性值
 			* fun:事件回调函数，当单击元素时函数被触发
 			*/
 			function myClick(idStr,fun){
 				var btn = document.getElementById(idStr);
 				btn.onclick = fun;
 			};

 			// btn01
 			myClick('btn01',function(){
 				// 创建一个“广州”节点，添加到#city下
 				// 1创建“广州”节点 <li>广州</li>
 				// 1.1 创建一个元素节点
 				var li = document.createElement('li');
 				// 1.2 创建一个文本节点
 				var gzText = document.createTextNode('广州');
 				// 1.3 将gzText设置为li的子节点
 				li.appendChild(gzText);
 				// 2添加到#city下
 				var city = document.getElementById('city');
 				city.appendChild(li);
 			});

 			// btn02
 			myClick('btn02',function(){
 				//将“广州”节点插入到#bj前面
 				// 1创建“广州”节点 <li>广州</li>
 				// 1.1 创建一个元素节点
 				var li = document.createElement('li');
 				// 1.2 创建一个文本节点
 				var gzText = document.createTextNode('广州');
 				// 1.3 将gzText设置为li的子节点
 				li.appendChild(gzText);
 				// 2插入到#bj前面
 				var city = document.getElementById('city');
 				var bj = document.getElementById('bj');
 				city.insertBefore(li,bj);
 			});

 			// btn03
 			myClick('btn03',function(){
 				//使用“广州”节点替换#bj节点
 				// 1创建“广州”节点 <li>广州</li>
 				// 1.1 创建一个元素节点
 				var li = document.createElement('li');
 				// 1.2 创建一个文本节点
 				var gzText = document.createTextNode('广州');
 				// 1.3 将gzText设置为li的子节点
 				li.appendChild(gzText);
 				// 2插入到#bj前面
 				var city = document.getElementById('city');
 				var bj = document.getElementById('bj');
 				city.replaceChild(li,bj);
 			});


 			// btn04
 			myClick('btn04',function(){
 				// 删除#bj节点
 				var bj = document.getElementById('bj');
 				// 第一种方法：知道它的父元素
 				// var city = document.getElementById('city');
 				// city.removeChild(bj);

 				// 第二种方法：不知道父元素，则需要先找到父元素在进行删除
 				// 【推荐使用】
 				bj.parentNode.removeChild(bj);
 			});

 			// btn05
 			myClick('btn05',function(){
 				//读取#city内的HTML代码
 				var city = document.getElementById('city');
 				console.log(city.innerHTML);
 			});

 			// btn06
 			myClick('btn06',function(){
 				//设置#bj内的HTML代码
 				var bj = document.getElementById('bj');
 				bj.innerHTML = '昌平';
 			});

 			// btn07
 			myClick('btn07',function(){
 				//用innerHTML方式创建“广州节点

 				// 第一种方法
 				// var city = document.getElementById('city');
 				// city.innerHTML += '<li>广州</li>';

 				// 第二种方法
 				var li = document.createElement('li');
 				li.innerHTML = '广州' ;
 				city.appendChild(li);

 			});
 		};
	</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 id='btnlist'>
			<div><button id='btn01'>01创建一个“广州”节点，添加到#city下</button></div>
			<div><button id='btn02'>02将“广州”节点插入到#bj前面</button></div>
			<div><button id='btn03'>03使用“广州”节点替换#bj节点</button></div>
			<div><button id='btn04'>04删除#bj节点</button></div>
			<div><button id='btn05'>05读取#city内的HTML代码</button></div>
			<div><button id='btn06'>06设置#bj内的HTML代码</button></div>
			<div><button id='btn07'>07用innerHTML方式创建“广州节点”</button></div>
		</div>
	</div>
</body>
</html>

效果图

在这里插入图片描述

此为学习笔记，仅供大家学习参考

Zella Zhang

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
js DOM增删改方法以及练习(二)

文章目录js DOM增删改方法以及练习DOM增删改方法总结DOM增删改方法大练习效果图js DOM增删改方法以及练习DOM增删改方法总结DOM增删改方法大练习<!DOCTYPE html><html lang="zh-cn"><head> <meta charset="utf-8" /> <title>js</title> <style> *{ margin:0px; padding: 0
复制链接

扫一扫