jquey和js插入节点

最新推荐文章于 2021-08-09 12:08:54 发布

touchandy

最新推荐文章于 2021-08-09 12:08:54 发布

阅读量885

点赞数

分类专栏： javascript jquery

本文链接：https://blog.csdn.net/touchandy/article/details/12614417

版权

jquery 同时被 2 个专栏收录

8 篇文章 0 订阅

订阅专栏

javascript

6 篇文章 0 订阅

订阅专栏

代码如下：

<!DOCTYPE HTML>
<html lang="en-US">
<head>
	<meta charset="UTF-8">
	<title>插入元素</title>
	<script type="text/javascript" src="js/jquery-1.10.2.min.js"></script>
	<style type="text/css">
	*{marign: 0px; padding: 0px;}
	
	.a, .b, .c{ width: 960px; min-height: 100px; background: grey; margin: 0px auto;}
	
	.b{ background: orange;}
	
	h2{ background: green; margin-top: 10px; }
	</style>
</head>
<body>
	<div class="a">this is div a
	<p><button class="btna" >使用append方法在内部最后面插入元素</button></p>
	<p><button class="btnp">点击使用prepend方法在内部最前面插入元素</button></p>
	</div>
	<div class="b">this is div b
	<p><button class="btnaf">使用after方法在div b外部的后面插入元素</button></p>
	<p><button class="btnb">使用before方法在div b外部的前面插入元素</button></p>
	</div>
	<div class="c" id="c">this is div c
	<p><button id="btnac">使用appendChild()方法插入元素</button></p>
	<p><button id="btnib">使用insertBefore()方法插入元素</button></p>
	<p><button id="btnbf">js模仿jquery的before()方法插入元素</button></p>
	<p><button id="btnaf">js模仿jquery的after()方法插入元素</button></p>

	</div>
	<script type="text/javascript">
		$(function(){
		/*--------1.在节点内部插入元素------------*/
		    
			//1.1 append()方法
			//append()方法是向每个元素内部追加元素
		
			var counta = 0;
			$(".btna").click(function(){
				var $_h2 = $("<h2>this is append"+counta+ "</h2>");
				$(".a").append($_h2);
				counta++;
			});
			
		
			//1.2 prepend()方法
			//prepend方法是在指定元素内部的第一个位置插入元素
			
			var countp = 0;
			$(".btnp").click(function(){
				var $_h2 = $("<h2>this is prepend"+countp+"</h2>")
				$(".a").prepend($_h2);
				countp++;
			});
			
			/*------------2.在节点外部插入元素-------------*/
			
			//2.1 after()方法
			//after()方法是在每个匹配的元素之后插入元素
			
			var countaf = 0;
			$(".btnaf").click(function(){
				var $_h2 = $("<h2>this is after"+ countaf+"</h2>");
				$(".b").after($_h2);
				countaf++;
			});
			
			//2.2 before()方法
			//before()方法是在匹配元素的前面插入元素
			var countb = 0;
			$(".btnb").click(function(){
				var $_h2 = $("<h2>this is after"+ countb+"</h2>");
				$(".b").before($_h2);
				countb++;
			});
			
			
		});
		
	
		//使用js实现
		window.onload = function(){
		 //js提供了两个方法实现向节点内部插入元素分别是appendChild()对应jquery的append()方法。
		 //insertBefore()方法对应jquery()方法的prepend()方法
		 
		 // 1.1 appendChild()方法
		 //appendChild()方法讲元素插入制定元素内部的尾部
		var countac = 0;
		document.getElementById("btnac").onclick = function(){
			var h2 = document.createElement("h2");
			var txt = document.createTextNode("this is "+countac);
			h2.appendChild(txt);
			document.getElementById("c").appendChild(h2);
			countac++;
		};
	              		
		//1.2 insertBefore()方法
		//insertBefore()方法它可以把一个指定的节点插入到给定元素里面语法e.insertBefore(new_e, target_e)
		var countib = 0;
		document.getElementById("btnib").onclick = function(){
			var h2 = document.createElement("h2");
			var txt = document.createTextNode("this is insertBefore"+countib);
			h2.appendChild(txt);
			var c = document.getElementById("c");
			c.insertBefore(h2, c.firstChild);
			countib++;
			}
			
		//js没有像jquery一样的after和before方法但是可以用insertBefore()方法实现
			//after
			var countaf = 0;
			document.getElementById("btnaf").onclick = function(){
				var h2 = document.createElement("h2");
				var txt = document.createTextNode("this is js模拟after"+countaf);
				h2.appendChild(txt);
				var c = document.getElementById("c");
				c.parentNode.insertBefore(h2,c.nextSibling);
				countaf++;
			}
			
			//before
			var countbf = 0;
			document.getElementById("btnbf").onclick = function(){
				var h2 = document.createElement("h2");
				var txt = document.createTextNode("this is js模拟before"+countbf);
				h2.appendChild(txt);
				var c = document.getElementById("c")
				c.parentNode.insertBefore(h2, c);
				countbf++;
			}
		}
		
	</script>
</body>
</html>

touchandy

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
jquey和js插入节点

代码如下：插入元素 *{marign: 0px; padding: 0px;} .a, .b, .c{ width: 960px; min-height: 100px; background: grey; margin: 0px auto;} .b{ background: orange;} h2{ background: green; margin
复制链接

扫一扫