Javascript dom增删改

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<link rel="stylesheet" type="text/css" href="./css/css.css"/>
		<script type="text/javascript">
			
			window.onload = function(){
				// 创建一 "墨尔本"节点,添加到#city下
				myClick("btn01",function(){
				   // 创建墨尔本节点<1i>墨尔本</li>
				   // 创建1i元素节点
				   /*
				   document . createElement ( )
				     可以用于创建一个元素节点对象,
				     它需要一个标签名作为参数,将会根据该标签名创建元素节点对象,
				     并将创建好的对象作为返回值返回
				   */
				  var li = document.createElement("li");
				  
				  //创建墨尔本文本节点
				  /*
				  document . createTextNode( )
				  可以用来创建一一个文本节点对象
				  需要一个文本内容作为参数,将会根据该内容创建文本节点,并将新的节点返回
				  */
				   var mebText = document.createTextNode("墨尔本");
				   
				  // 将mebText设置1i的子节点
				  /*
				  appendChild( )
				    - 向一个父节点中添加一-个新的子节点
				    - 用法:父节点. appendChild(子节点);
				  */
				 li.appendChild(mebText);
				 
				 // 获取id为city的节点
				 var city = document.getElementById("city");
				   
				 // 将墨尔本添加到city下
				 city.appendChild(li);

				});
				
				// "墨尔本"节点插入到#wyn前面
				myClick("btn02",function(){
					//创建墨尔本
					var li = document.createElement("li");
					var mebText = document.createTextNode("墨尔本");
					li.appendChild(mebText);
					
					//获取id为eyn的节点
					var eyn = document.getElementById("eyn");
					
					//获取city
					var city = document.getElementById("city");
					
					/*
					insertBefore( )
					可以在指定的子节点前插入新的子节点
					- 语法:
					  父节点. insertBefore (新节点,旧节点) ;

					*/
				   city.insertBefore(li,wyn);
				});
				
				// 删除#wyn节点
				myClick("btn04",function(){
					// 获取id为wyn的节点
					var wyn = document.getElementById("wyn");
					//获取city
					var city = document.getElementById("city");
					
					/*
					removeChild( )
					  - 可以删除一个子节点
					  - 语法:父节点。removeChild(子节点) ;
					    子节点.parentNode.removeChild(子节点) ;
					*/
				   // city.removeChild(wyn);
				  wyn.parentNode.removeChild(wyn);
				});
				
				// 读取#city内的HTML代码
				myClick("btn05",function(){
					//获取city
					var city = document.getElementById("city");
					
					console.log(city.innerHTML);
				});
				
				// 设置#wyn内的HTML代码
				myClick("btn06",function(){
					//获取wyn
					var wyn = document.getElementById("wyn");
					
					wyn.innerHTML = "海口";
				});
				
				
				myClick("btn07",function(){
					// 向city内添加惠灵顿
					var wyn = document.getElementById("city");
					
					/*
					使用innerHTML也可以完成DOM的增删改的相关操作
					  -般我们会两种方式结合使用
					*/
					
					city.innerHTML = "<li>惠灵顿</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="wyn">维也纳</li>
					<li>多伦多</li>
					<li>哥本哈根</li>
					<li>温哥华</li>
				</ul>
				
			</div>
		</div>
		<div id="btnList">
			<div><button id="btn01">创建一个"墨尔本"节点,添加到#city下</button></div>
			<div><button id="btn02">"墨尔本"节点插入到#wyn前面</button></div>
			<div><button id="btn03">使用"墨尔本"节点替换#wyn节点</button></div>
			<div><button id="btn04">删除#wyn节点</button></div>
			<div><button id="btn05">读取#city内的HTML代码</button></div>
			<div><button id="btn06">设置#wyn内的HTML代码</button></div>
			<div><button id="btn07">创建一个"墨尔本"节点,添加到#city下</button></div>
		</div>
	</body>
</html>

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

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值