1.克隆节点介绍
2.替换节点
注意点：替换后的事件将不会存在
3.程序（克隆）
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Insert title here</title> <script type="text/javascript" src="jquery-3.2.1.min.js"></script> <script type="text/javascript"> $(function(){ //事件 $("li").click(function(){ alert($(this).text()); }); //克隆节点 $("#bj").clone(true) .attr("id","bj2") .insertAfter("#rl") }) </script> </head> <body> <p>你喜欢哪个城市?</p> <ul id="city"> <li id="bj" name="BeiJing">北京</li> <li>上海</li> <li id="dj">东京</li> <li id="se">首尔</li> </ul> <br> <p>你喜欢哪款单机游戏?</p> <ul id="game"> <li id="rl">红警</li> <li>实况</li> <li>极品飞车</li> <li>魔兽</li> </ul> </body> </html>
4.程序（替换）
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="UTF-8"> 5 <title>Insert title here</title> 6 <script type="text/javascript" src="jquery-3.2.1.min.js"></script> 7 <script type="text/javascript"> 8 $(function(){ 9 //replaceAll 10 $("<li id='xa'>西安</li>").replaceAll($("#city li:eq(2)")); 11 12 //replaceWith 13 $("#city li:last").replaceWith("<li id='nj'>南京</li>"); 14 }) 15 </script> 16 </head> 17 <body> 18 <p>你喜欢哪个城市?</p> 19 <ul id="city"> 20 <li id="bj" name="BeiJing">北京</li> 21 <li>上海</li> 22 <li id="dj">东京</li> 23 <li id="se">首尔</li> 24 </ul> 25 </body> 26 </html>
5.程序（互换）
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="UTF-8"> 5 <title>Insert title here</title> 6 <script type="text/javascript" src="jquery-3.2.1.min.js"></script> 7 <script type="text/javascript"> 8 $(function(){ 9 alert(1); 10 var $bj2=$("#bj").clone(true); 11 var $rl=$("#rl").replaceWith($bj2); 12 $("#bj").replaceWith($rl); 13 }) 14 </script> 15 </head> 16 <body> 17 <p>你喜欢哪个城市?</p> 18 <ul id="city"> 19 <li id="bj" name="BeiJing">北京</li> 20 <li>上海</li> 21 <li id="dj">东京</li> 22 <li id="se">首尔</li> 23 </ul> 24 25 <br> 26 27 <p>你喜欢哪款单机游戏?</p> 28 <ul id="game"> 29 <li id="rl">红警</li> 30 <li>实况</li> 31 <li>极品飞车</li> 32 <li>魔兽</li> 33 </ul> 34 </body> 35 </html>