jQuery操作页面元素之元素插入

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>