jQuery的增删改方法

素颜马尾好姑娘i 2022-12-02 12:29 170阅读 0赞

append()/appendTo():向指定项最后添加元素  
prepend()/prependTo():向指定项最前面添加元素  
replaceWith():替换指定元素  
empty():删除指定元素下所有的子节点，不包括自身  
remove():移除指定项，包括自身  
insertBefore(newNode,referranceNode);新节点被插到参照节点之前  
before():向指定项前面添加元素  
after():向指定项的后面添加元素  
具体用法：

<!DOCTYPE html>
    <html>
    	<head>
    		<meta charset="UTF-8">
    		<title>增删改的方法</title>
    		<script type="text/javascript" src="../js/jquery-3.1.1/jquery-3.1.1.min.js" ></script>
    		<script type="text/javascript">
    			$(function(){
    				var $ul1 = $("#ul1");
    				//向id为ul1的ul下添加一个span(最后)
    //				$ul1.append("<span>我是用append()添加的span</span>");
    				$("<span>我是用appendTo()添加的span</span>").appendTo($ul1);
    				//向id为ul1的ul下的添加一个span(最前)
    //				$ul1.prepend("<span>我是用aprepend()添加的span</span>");
    				$("<span>我是用prependTo()添加的span</span>").prependTo($ul1);
    				//向id为ul1的ul下的li(title为hello)的前面添加span
    				//insertBefore(newNode,referranceNode);新节点被插到参照节点之前
    				$ul1.children("li").filter("[title=hello]").before("<span>我是用before()添加的span</span>");
    				//在id为ul1的ul下的li(title为hello)的后面添加span
    				$ul1.children("li").filter("[title=hello]").after("<span>我是用after()添加的span</span>");
    				//将id为ul2下的ul下的li(title为hello)全部替换为p
    				$("#ul2").children("li[title=hello]").replaceWith("<p></p>");//replaceAll()要传选择器
    				
    				//移除id为ul2的ul下的所有li
    				$("#ul2").empty();//把ul2下的东西全删除了
    				
    //				$("#ul2>li").remove();
    			});
    		</script>
    	</head>
    	<body>
    		<ul id="ul1">
    			<li>AAAAA</li>
    			<li title="hello">BBBBB</li>
    			<li class="box">CCCCC</li>
    			<li title="hello">DDDDD</li>
    			<li title="two">EEEEE</li>
    			<li>FFFFF</li>
    		</ul>
    		<br />
    		<br />
    		<ul id="ul2">
    			<li>aaa</li>
    			<li title="hello">bbb</li>
    			<li class="box">ccc</li>
    			<li title="hello">ddd</li>
    			<li title="two">eee</li>
    		</ul>
    	</body>
    </html>