第二十九节 jQuery之新建节点操作

 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>