jQuery的追加节点

最新推荐文章于 2023-06-16 19:59:01 发布

.Deity

最新推荐文章于 2023-06-16 19:59:01 发布

阅读量1.1k

点赞数

文章标签： jquery javascript 前端

本文链接：https://blog.csdn.net/m0_68189681/article/details/123629612

版权

<body>
		<h2>节点追加(父子)</h2>
		<ul id="shu">
		    <li>刘备</li>
		    <li>张飞</li>
		    <li>关羽</li>
		</ul>
		<ul id="wu">
		    <li>孙权</li>
		    <li>周瑜</li>
		    <li id="gai">黄盖</li>
		</ul>
		<input type="button" value="追加1" onclick="f1()" />
		<input type="button" value="追加2" onclick="f2()" />
	    <script>
			function f1(){
				//主动追加		
				//新节点追加
				//append() 后置 
				$('#shu').append('<li>赵云</li>')
				//prepend() 前置 
				$('#shu').prepend('<li>马超</li>')
			}
			function f2(){
				//被动追加
				//appendTo  后置追加
				//prependTo  前置追加
				$("<li>诸葛亮</li>").appendTo('#shu');
				$("<li>孙尚香</li>").prependTo('#shu');
			}
            function  f1(){
				    //主动追加(兄弟关系)
				    //after()  后置追加
				    //before()  前置追加
					$('#fei').after('<li>严卢茜</li>')
					$('#gai').before('<li>张浩浩</li>')		
					$("#wu li:eq(0)").after('<li>小黑</li>')
				}
				function f2(){
				    //被动追加
				    //insertAfter()  后置
				    //insertBefore()  前置
				
				}
		</script>
	</body>

jQuery节点的替换

<body>
		    <h2>节点追加(兄弟)</h2>
		    <ul id="shu">
		        <li>刘备</li>
		        <li id="fei">张飞</li>
		        <li>关羽</li>
		    </ul>
		    <ul id="wu">
		        <li>孙权</li>
		        <li>周瑜</li>
		        <li id="gai">黄盖</li>
		    </ul>
		    <input type="button" value="追加1" onclick="f1()" />
		    <input type="button" value="追加2" onclick="f2()" />
			<script>
				function  f1(){
				    //主动追加(兄弟关系)
				    //after()  后置追加
				    //before()  前置追加
					// $('#fei').after('<li>严卢茜</li>')
					// $('#gai').before('<li>张浩浩</li>')		
					$("#wu li:eq(0)").after('<li>小黑</li>')
				}
				function f2(){
				    //被动追加
				    //insertAfter()  后置
				    //insertBefore()  前置
				
				}
			</script>
	</body>