首页 > 代码库 > 基本元素的增加 jquery

基本元素的增加 jquery

2024-07-17 05:07:14   220人阅读

 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="http://www.mamicode.com/#"></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>
View Code

 


联系
我们