建立元素经历的过程：
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; width: 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; width: 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; width: 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; width: 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>
|
