克隆節點，替換節點
阿新 • • 發佈：2017-08-05
utf-8 with set style head cit .text ast ges
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>
克隆節點，替換節點