(11)JavaScript DOM插入节点及自定义的insertAfter方法

最新推荐文章于 2022-08-08 22:29:46 发布

有个机车梦

最新推荐文章于 2022-08-08 22:29:46 发布

阅读量549

点赞数

分类专栏： JavaScript DOM

本文链接：https://blog.csdn.net/Yuz_99/article/details/84563414

版权

JavaScript DOM 专栏收录该内容

13 篇文章 1 订阅

订阅专栏

获取最后一个子节点: .lastChild
获取下一个兄弟节点 .nextSibling

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
	<script type="text/javascript">
	 //测试insertBefore()插入节点
	 //该方法初二进行插入外 ， 还有移动节点的功能
	  window.onload = function()
	  {
			//1.  把#rl 插入到 #bj 节点的前面
			var cityNode = document.getElementById("city");
			var bjNode = document.getElementById("bj");
			var rlNode = document.getElementById("rl");
			cityNode.insertBefore(rlNode,bjNode);
	  }
		//把newNode 插入到 refNode 的后面
		funciton insertAfter(newNode,refNode){
			//1.	测试refNode是否为其父节点的最后一个子节点
			//获取父亲节点
			var parNode = refNode.parentNode;
			var lastNode = parNode.lastChild;
			//2.	若是：直接把newNode插入为refNode 父节点的最后一个子节点
			if(lastNode == refNode){
				parNode.appendChild(newNode);
			}else{
				//3.	若不是： 获取refNode的下一个兄弟节点  然后插入到其下一个兄弟的前面
					var nextNode = refNode.nextSibling;		
					parNode.insertBefore(newNode,nextNode);
			}
		}
	</script>
</head>
<body>
	<p>你喜欢哪个城市？</p>
	<ul id = "city">
		<li id="bj" name="beijing">北京</li>
	   <li>上海</li>
	   <li>东京</li>
	   <li>首尔</li>
	</ul>
	
	<br><br>
	<p>你喜欢哪款单机游戏？</p>
	<ul id = "game">
	   <li id="rl">红警</li>
	   <li>实况</li>
	   <li>极品飞车</li>
	   <li>魔兽</li>
	</ul>
	<br><br>
	
	gender:
		<input type="radio" name="gender" value="male"/>Male
		<input type="radio" name="gender" value="female"/>Female
		
	name: <input type="text" name="username" id="name" value="11111"/>
</body>
</html>

互换#city节点和#game节点的内容

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
	<script type="text/javascript">
	 
	 
	 
	  window.onload = function()
	  {
			var cityNode = document.getElementById("city");
			var gameNode = document.getElementById("game");
			//互换#city节点和#game节点的内容
			var tempHTML = cityNode.innerHTML;
			cityNode.innerHTML = gameNode.innerHTML;
			gameNode.innerHTML = tempHTML;
	  }
	</script>
</head>
<body>
	<p>你喜欢哪个城市？</p>
	<ul id = "city">
		<li id="bj" name="beijing">北京</li>
	   <li>上海</li>
	   <li>东京</li>
	   <li>首尔</li>
	</ul>
	
	<br><br>
	<p>你喜欢哪款单机游戏？</p>
	<ul id = "game">
	   <li id="rl">红警</li>
	   <li>实况</li>
	   <li>极品飞车</li>
	   <li>魔兽</li>
	</ul>
	<br><br>
	
	gender:
		<input type="radio" name="gender" value="male"/>Male
		<input type="radio" name="gender" value="female"/>Female
		
	name: <input type="text" name="username" id="name" value="11111"/>
</body>
</html>