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>