1：jQuery提供的append()、prepend()、appendTo()、prependTo()、after()、before()、insertAfter()和insertBefore()等方法可以向文檔中插入結點。
1 <!DOCTYPE html> 2 <html> 3 4 <head> 5 <meta charset="uft-8"> 6 <title>插入結點</title> 7 <script type="text/javascript" src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-3.2.1.min.js"> 8 </script> 9 </head> 10 <script> 11 /* 12 $(選擇器).append(參數1,參數n) 13 $(參數).appendTo(選擇器) 14 1:選擇器匹配的目標元素作為添加元素的父元素。若匹配多個元素，則同時為這些元素添加相同子結點 15 2:參數可以是HTML字符串、HTML元素、文本、數組或jQuery對象，也可以是返回這些內容的函數。 16 append()方法提供多個參數時，同時添加多個子結點。 17 */ 18 $(function() { 19 $('#btn').click(function() { 20 $('div').append('<b>用戶名</b>', '<br>', '<h1>append方法添加</h1>') 21 }) 22 $('#btn1').click(function() { 23 $('<h2>appendTo方法添加</h2>').appendTo('.my_div1') 24 }) 25 }) 26 </script> 27 28 <body> 29 <div class="my_div1"> 30 頂層div 31 <div class="my_div2">子元素2</div> 32 <div class='my_div3'>子元素3</div> 33 </div> 34 <button type="button" id="btn">使用append方法添加子元素</button> 35 <button type="button" id="btn1"> 使用appendTo方法添加子元素</button> 36 </body> 37 38 </html>
2：使用jQuery對象做參數
1 <!DOCTYPE html> 2 <html> 3 4 <head> 5 <meta charset="uft-8"> 6 <title>移動和復制現有元素</title> 7 <script type="text/javascript" src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-3.2.1.min.js"> 8 </script> 9 </head> 10 <script> 11 /* 12 $(選擇器).append(參數1,參數n) 13 $(參數).appendTo(選擇器) 14 1:選擇器匹配的目標元素作為添加元素的父元素。若匹配多個元素，則同時為這些元素添加相同子結點 15 2:參數可以是HTML字符串、HTML元素、文本、數組或jQuery對象，也可以是返回這些內容的函數。 16 append()方法提供多個參數時，同時添加多個子結點。 17 */ 18 $(function() { 19 $('#btn').click(function() { 20 //div2被移動.注意append和appendTo的語法。 21 $('div1f').append($('#div2')) 22 }) 23 //注意移動的是參數. 24 $('#btn1').click(function() { 25 $('#div3').appendTo('.div2f:last') 26 }) 27 }) 28 </script> 29 30 <body> 31 <div class="f_div"> 32 頂層div 33 <div class="div1f">子元素1</div> 34 <div class='div2f'>子元素2</div> 35 </div> 36 <div id="div2"> 37 頂層div2 38 </div> 39 <div id="div3"> 40 頂層div3 41 </div> 42 <button type="button" id="btn">使用append方法移動子元素</button> 43 <button type="button" id="btn1"> 使用appendTo方法移動子元素</button> 44 </body> 45 46 </html>