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 = "
  • 惠灵顿
  • "
    ; }); }; 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>

    效果:
    Javascript dom增删改_第1张图片

    你可能感兴趣的:(javascript,前端)