jquery节点操作

时间：6年前阅读：4753

1、节点操作

<!DOCTYPE html>    
<html>    
	<head>    
		<meta charset="UTF-8">    
		<title></title>    
		<style type="text/css">    
			#hd{    
				width: 600px;    
				height: 500px;    
				border: 2px solid blue;    
			}    
		</style>    
		<script src="jquery-1.11.3.min.js.js" type="text/javascript"></script>    
		<script type="text/javascript">    
			$(function(){    
				$('#dd').click(function(){    
//				创建一个新的h2标签    
//				在jquery中创建新标签只需要将标签最终的代码写成字符串形式即可    
//				var newH = '<h2 class="hd">我是新来的！</h2>';    
////				将新创建的标签追加到box里  append:添加,在#box里面一堆h2标签后面加    
//				$('#box').append(newH);    
//				(第1种写法)把#aa追加进#box里面的最后    
//				$('#box').append($("#aa"));    
//				(第2种写法)	将#aa加进#box里面的最后    
//				$('#aa').appendTo($("#box"));    
////				从头部追加    
//				$("#box").prepend($('#aa'));    
////				prependTo也是从头部追加 反过来写    
//				$("#aa").prependTo($('#box'));    
//				
    
//				插队:中间插入			
    
//				after:后面  在eq(1)后面插入    
//				$("#box h2").eq(1).after($("#aa"));    
////				插队:中间插入反过来写法和上面的效果一样的    
//				$("#aa").insertAfter($("#box h2").eq(1));    
//				插队:中间插入    
//				before:前面   在eq(1)前面插入    
//				$("#box h2").eq(1).before($("#aa"));    
//				和上面的一样,位置倒过来写    
				$("#aa").insertBefore($("#box h2").eq(1));    
				})    
			})    
		</script>    
	</head>    
	<body>    
		<h1 id="aa">这个是h1标签</h1>    
		<input type="button" name="" id="dd" value="来点我呀" />    
		<br /><br />    
		<div id="box">    
		<h2>如果你是工作经验小于2年的朋友0</h2>    
		<h2>如果你是工作经验小于2年的朋友1</h2>    
		<h2>如果你是工作经验小于2年的朋友2</h2>    
		<h2>如果你是工作经验小于2年的朋友3</h2>    
		<h2>如果你是工作经验小于2年的朋友4</h2>    
		<h2>如果你是工作经验小于2年的朋友5</h2>    
		<h2>如果你是工作经验小于2年的朋友6</h2>    
		</div>    
	</body>    
</html>

上面代码效果图片

本站声明:网站内容来源于网络,如有侵权,请联系我们https://www.qiquanji.com,我们将及时处理。

微信扫码关注

更新实时通知

jquery节点操作

网友评论