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>