1 <!DOCTYPE html>
2 <html lang="en">
3 <head>
4 <meta charset="UTF-8">
5 <title>Document</title>
6 <script type="text/javascript" src="../jquery-1.12.4.min.js"></script>
7 <script type="text/javascript">
8 $(function(){
9 // 通过HTML的字符串方式添加节点性能最高，但是会替代原来标签里面的数据
10 $('#div1').html($('#div1').html()+'<a href ="#">链接1</a>')
11
12 // 新建一个元素
13 $a1 = $('<a href ="#">链接2</a>');
14 $('#div1').append($a1);
15
16 $a2 = $('<a>'); // div的子元素最后在后面插入一个空标签
17 $('#div1').append($a2);
18 // $a1.appendTo($('#div1'));
19
20 // div的子元素最前面插入一个标签
21 $p = $('<p>')
22 // $('#div1').prepend($p);
23 $p.prependTo('#div1');
24
25
26 // div的元素后插入一个同级标签
27 $h2 = $('<h2>');
28 // $('#div1').after($h2);
29 $h2.insertAfter($('#div1'));
30
31
32 $h3 = $('<h3>');
33 // $h3.insertBefore($('#div1'));
34 $('#div1').before($h3);
35
36
37
38 });
39 </script>
40 </head>
41 <body>
42 <div id="div1">
43 <h1>这是一个h1标签</h1>
44 </div>
45 </body>
46 </html>
