1 <!doctype html> 2 <html> 3 <head> 4 <meta charset="utf-8"> 5 <title>无标题文档</title> 6 </head> 7 <style> 8 #add{background:#F0696C;width:500px;} 9 </style> 10 <script src="jquery-2.1.1.js" type="text/javascript"></script> 11 <script> 12 $(function(){ 13 /* 14 插入元素 15 */ 16 $('#btn_add').click(function(){ 17 $('#add').append($('<p>我是一个append方法增加的段落</p>'));//在div中追加元素 18 }); 19 $('#btn_add2').click(function(){ 20 $('#add').before($('<p>我是一before方法增加的段落</p>'));//在div前添加元素 21 }); 22 $('#btn_add3').click(function(){ 23 $('#add').append(function(index, html) { 24 return $('<strong>我是一append(function())方法增加的段落</strong><br>');//可以是原生的和jquery的 25 }); 26 }); 27 /////////////////////////// 28 $('#btn').click(function(){ 29 $('#update span').appendTo($('#update ul li:eq(1)'));//删除以前的东西，相当于把当前的东西移除后追加到其位置 30 }); 31 32 $('#btn_1').click(function(){ 33 //$('#update ul').prepend('<li>我是一个新li</li>'); //在此节点下插入新的子节点 34 $('#update span').prependTo($('#update ul')); 35 }); 36 37 $('#btn_2').click(function(){ 38 $('#add').before('<div>我在div之前插入</div>'); 39 $('#add').after('<div>我在div之后插入</div>'); 40 $('#add').prev('div').css('background','#41DBA4'); 41 $('#add').next('div').css('background','#EAED73'); 42 }); 43 44 $('#btn_3').click(function(){ 45 $('#outer').insertBefore('#add');//把外边的删除了加了进去 46 }) 47 48 $('#btn_4').click(function(){ 49 $('#update span').wrap('<a href="#"></a>'); 50 $('#update p').wrap(function() { 51 return '<div style="background:green">dashazi</div>' 52 }); 53 }) 54 55 $('#update ul li').wrap('<strong></strong>'); 56 }) 57 </script> 58 <body> 59 <div id="add"> 60 </div> 61 <button id="btn_add">11111111111111111在div中增加其他的元素</button> 62 <button id="btn_add2">22222222222222222在div中增加其他的元素</button> 63 <button id="btn_add3">33333333333333333在div中增加其他的元素</button><br> 64 <button id="btn_2">插入</button><button id="btn_3">insertBefor</button> 65 <button id="btn_4">包装元素</button> 66 <div id="outer">我是外边的了</div> 67 <div id="update"> 68 <span>wangwangwang</span><p>caoyaoyao</p><button id="btn">移动</button><button id="btn_1">插入新的节点</button> 69 <ul> 70 <li>caocaocao</li> 71 <li>zhaozhaozhao</li> 72 <li>qianqianqian</li> 73 <li>zhouzhouzhou</li> 74 </ul> 75 </div> 76 </body> 77 </html>