建立元素经历的过程：
1、建立元素
2、为元素添加文本或属性
3、将元素追加到DOM中
添加元素以下几个方法：
| 方法 | 说明 |
| append() | 在选择元素的子元素后面追加。由选择的元素调用这个函数，函数中的参数是新元素。 |
| prepend() | 在选择元素的子元素前面追加。由选择的元素调用这个函数，函数中的参数是新元素。 |
| after() | 在选择元素的后面添加。由选择的元素调用这个函数，函数中的参数是新元素。 |
| before() | 在选择元素的后面添加。由选择的元素调用这个函数，函数中的参数是新元素。 |
| appendTo() | 将新元素追加到选择元素的子元素后面。由新创建的元素调用这个方法，函数中的参数是选择的元素。 |
| prependTo() | 将新元素追加到选择元素的子元素前面。由新创建的元素调用这个方法，函数中的参数是选择的元素。 |
创建元素通常有以下几种方式。
1、采用html创建元素。
|
1
|
var el= "<p>全面深化改革</p>"; |
2、使用JavaScript创建元素，要经历两个步骤
|
1
2
|
var el= document.createElement("p");el.innerHTML="全面深化改革"; |
3、使用jQuery创建元素
|
1
|
var el= $("<p>全面深化改革</p>"); |
append示例
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
|
<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title>append</title> </script> </head> <body> <div> <ul id="ul"> <li id="a">鼠标</li> <li id="b">键盘</li> <li id="c">屏幕</li> <li id="d"><a>主机</a></li> </ul> </div> <button>添加元素</button> <script> $('button').on('click',function(){ var pel="<p>全面深化改革</p>"; $('div').append(pel); }); </script> </body></html> |
prepend示例
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
|
<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title>prepend</title> </script> </head> <body> <div> <ul id="ul"> <li id="a">鼠标</li> <li id="b">键盘</li> <li id="c">屏幕</li> <li id="d"><a>主机</a></li> </div> <button>添加元素</button> <script> $('button').on('click',function(){ var pel="<p>全面深化改革</p>"; $('div').prepend(pel); }); </script> </body></html> |
after示例
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
|
<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title>after</title> </script> </head> <body> <div style=" font-family: Consolas, "Bitstream Vera Sans Mono", "Courier New", Courier, monospace !important; font-size: 1em !important; padding: 0px !important; background: none !important; border-radius: 0px !important; border: 0px !important; bottom: auto !important; float: none !important; height: auto !important; left: auto !important; line-height: 1.1em !important; margin: 0px !important; outline: 0px !important; overflow: visible !important; position: static !important; right: auto !important; top: auto !important; vertical-align: baseline !important; auto !important; min-height: auto !important;">> <ul id="ul"> <li id="a">鼠标</li> <li id="b">键盘</li> <li id="c">屏幕</li> <li id="d"><a>主机</a></li> </ul> </div> <button>添加元素</button> <script> $('button').on('click',function(){ var pel="<p>全面深化改革</p>"; $('div').after(pel); }); </script> </body></html> |
before示例
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
|
<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title>before</title> </script> </head> <body> <div style=" font-family: Consolas, "Bitstream Vera Sans Mono", "Courier New", Courier, monospace !important; font-size: 1em !important; padding: 0px !important; background: none !important; border-radius: 0px !important; border: 0px !important; bottom: auto !important; float: none !important; height: auto !important; left: auto !important; line-height: 1.1em !important; margin: 0px !important; outline: 0px !important; overflow: visible !important; position: static !important; right: auto !important; top: auto !important; vertical-align: baseline !important; auto !important; min-height: auto !important;">> <ul id="ul"> <li id="a">鼠标</li> <li id="b">键盘</li> <li id="c">屏幕</li> <li id="d"><a>主机</a></li> </ul> </div> <button>添加元素</button> <script> $('button').on('click',function(){ var pel="<p>全面深化改革</p>"; $('div').before(pel); }); </script> </body></html> |
appendTo示例
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
|
<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title>appendTo</title> </script> </head> <body> <div style=" font-family: Consolas, "Bitstream Vera Sans Mono", "Courier New", Courier, monospace !important; font-size: 1em !important; padding: 0px !important; background: none !important; border-radius: 0px !important; border: 0px !important; bottom: auto !important; float: none !important; height: auto !important; left: auto !important; line-height: 1.1em !important; margin: 0px !important; outline: 0px !important; overflow: visible !important; position: static !important; right: auto !important; top: auto !important; vertical-align: baseline !important; auto !important; min-height: auto !important;">> <ul id="ul"> <li id="a">鼠标</li> <li id="b">键盘</li> <li id="c">屏幕</li> <li id="d"><a>主机</a></li> </ul> </div> <button>添加元素</button> <script> $('button').on('click', function () { // 必须使用$()创建元素 $("<p>全面深化改革</p>").appendTo("div"); }); </script> </body></html> |
prependTo示例
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
|
<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title>prependTo</title> </script> </head> <body> <div style=" font-family: Consolas, "Bitstream Vera Sans Mono", "Courier New", Courier, monospace !important; font-size: 1em !important; padding: 0px !important; background: none !important; border-radius: 0px !important; border: 0px !important; bottom: auto !important; float: none !important; height: auto !important; left: auto !important; line-height: 1.1em !important; margin: 0px !important; outline: 0px !important; overflow: visible !important; position: static !important; right: auto !important; top: auto !important; vertical-align: baseline !important; auto !important; min-height: auto !important;">> <ul id="ul"> <li id="a">鼠标</li> <li id="b">键盘</li> <li id="c">屏幕</li> <li id="d"><a>主机</a></li> </ul> </div> <button>添加元素</button> <script> $('button').on('click', function () { // 必须使用$()创建元素 $("<p>全面深化改革</p>").prependTo("div"); }); </script> </body></html> |