基本元素的增加 jquery

浏览数：35 / 时间：2015年06月09日

 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>