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>
基本元素的增加 jquery
时间： 2024-10-05 06:50:32