jq 操作文档节点

深藏阁楼爱情的钟 2021-07-24 17:30 388阅读 0赞

操作文档结构
    
    内部插入
    	追加数据到已有内容后面
    		对象数组.append("追加内容"); 会解析标签  
    				function t1()
    			{
    				var div=$("#showdiv");	
    				div.append("<b>饭</b>");
    			}
    			
    	追加页面已有节点
    		$('选择器').append($('选择器'));
                      .append($('<p>啦啦啦</p>'));
                      		
    	追加数据到已有内容前面
    		对象数组.prepend("追加内容");  会解析标签
    				function t2()
    			{
    				var div=$("#showdiv");
    				div.prepend("在前面");
    			}
    		
    		追加页面已有节点
    		$('选择器').prepend($('选择器'));
    		
    	将页面上的某个标签移动至另一个标签已有内容之后之后
    		$("选择器").appendTo(数组对象/id);
    				function t3()
    			{
    				var div=$("#showdiv");
    				$("#u1").appendTo(div);
    			}
    			
    	将页面上的某个标签移动至另一个标签已有内容之前
    		$("选择器").prependTo(数组对象/id)
    				function t4()
    			{
    				var div=$("#showdiv");
    				$("#u1").prependTo(div);
    			}
    
    外部插入
    	在某个标签之后增加数据
    		数组对象.after("追加内容")
    			function t5()
    		{
    			var div=$("#showdiv");
    			div.after("天气好");
    		}
    		
    		追加页面已有节点
    		$('选择器').after($('选择器'));
    		
    	在某个标签之后追加数据
    		数组对象.before("追加内容")
    			function t6()
    		{
    			var div=$("#showdiv");
    			div.before("追加内容");
    		}
    		
    		追加页面已有节点
    		$('选择器').before($('选择器'));
    		
    	将某个标签移动至另一个标签后面
    		$(选择器).insertAfter(数组对象/id)
    			function t7()
    		{
    			var div=$("#showdiv");
    			$("#b1").insertAfter(div);
    		}
    	将某个标签移动至另一个标签前面
    		$(选择器).insertBefore(对象数组/id)
    			function t8()
    		{
    			var div =$("#showdiv");
    			$("#b1").insertBefore(div);
    	
    		}
    
    包裹
    	创造元素来包含另一个元素
    		$(选择器).wrap("<div></div>") 会创建一个div来包含选择器选择的对象
    		$(选择器).warp(document.getElementById(xx))  会将已有的对象来包含选择器指定对象，已有对象不改变
    		
    替换
    	$(选择器).replaceWith("<b>aaa<b>");  将指定选择器对象全部替换成替换内容
    	$("<b>aaa</b>").replaceAll(选择器);  将选择器选择的对象替换成替换内容
    
    清空
    	清除指定对象下的所有子节点
    		$(选择器).empty();    等价于$('选择器').html('');
    			$("p").empty();  清除p标签数组对象下的所有子标签
    
    克隆(会克隆所选节点的所有子节点)
    	$(选择器).clone().添加方式
    		$("#b1").clone().insertAfter(div);
    	
    	$(选择器).clone(true/false);  是否把克隆节点的事件复制
    
    删除
    	$('选择器').remove();   会将改节点删除，返回值为删除的节点

代码示例

<html>
    	<head>
    		<meta charset="utf-8">
    		<title>jq 操作元素的文档结构</title>
    		<script type="text/javascript" charset="UTF-8" src="js/jquery-3.4.1.js"></script>
    		<script type="text/javascript">
    			
    			function t1()
    			{ 
    				var div=$("#showdiv");
    				
    				div.append("<b>饭</b>");
    			}
    			function t2()
    			{ 
    				var div=$("#showdiv");
    				
    				$("#u1").appendTo(div);
    			}
    			function t3()
    			{ 
    				var div=$("#showdiv");
    				div.prepend("<i> 在前面</i>");
    			}
    			function t4()
    			{ 
    				var div=$("#showdiv");
    				$("#u1").prependTo(div);
    			}
    			function t5()
    			{ 
    				var div=$("#showdiv");
    				div.after("<b>今天天气不错</b>");
    			}
    			function t6()
    			{ 
    				var div=$("#showdiv");
    				div.before("<b>在结点外</b>")
    			}
    			function t7()
    			{ 
    				var div=$("#showdiv");
    				$("#b1").insertAfter(div);
    			}
    			function t8()
    			{ 
    				var div=$("#showdiv");
    				$("#b1").insertBefore(div);
    			}
    			function t9()
    			{ 
    				$("#showdiv").empty();
    			}
    			function t10()
    			{ 
    				var div=$("#showdiv");
    				$("#b1").clone().insertAfter(div);
    			}
    		</script>
    		<style type="text/css">
    			
    			#showdiv{ 
    				width:300px;
    				height:300px;
    				border:solid 2px orange;
    			}
    		</style>
    	</head>
    	<body>
    		<input type="button" value="测试append" onclick="t1()"  />
    		<input type="button" value="测试appendTo" onclick="t2()" />
    		<input type="button"  value="测试prepend" onclick="t3()"/>
    		<input type="button"  value="测试appendTo" onclick="t4()"/>
    		<input type="button"  value="测试after" onclick="t5()"/>
    		<input type="button" value="测试before" onclick="t6()" />
    		<input type="button" value="测试insertAfter" onclick="t7()"/>
    		<input type="button" value="测试insertBefore" onclick="t8()"/>
    		<input type="button" value="测试empty" onclick="t9()"/>
    		<input type="button" value="测试克隆" onclick="t10()" />
    		<hr />
    		<u id="u1">下划线啊啊啊啊啊啊啊啊啊啊啊啊啊啊</u>
    		<i id="i1">呜呜呜呜呜</i>
    		<div id="showdiv">
    		<b id="b1">哇咔咔</b>
    		</div>
    	</body>
    </html>