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>
原文地址：https://www.cnblogs.com/1314bjwg/p/12276038.html
时间： 2024-07-31 11:22:54