jQuery 入门教程(14): 添加HTML元素
使用jQuery可以方便的添加新的HTML元素。
下面的方法用于添加HTML元素：
append() – 在指定的元素的尾部添加一个新内容。
prepend() -在指定的元素里前部添加新内容。
after() – 在指定元素后添加新内容
before() -在指定元素的前面添加新内容。
乍一看append,prepend 和after,before似乎功能一样，但append,prepend指在选中的元素本身（内部）的前面和后面，而after,before指在选择中的元素的前面和后面。
可以参考下面的append例子：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>JQuery Demo</title>
<script src="scripts/jquery-1.9.1.js"></script>
<script>
$(document).ready(function () {
$("#btn1").click(function () {
$("p").append(" <b>Appended text</b>.");
});
$("#btn2").click(function () {
$("ol").append("<li>Appended item</li>");
});
});
</script>
</head>
<body>
<p>This is a paragraph.</p>
<p>This is another paragraph.</p>
<ol>
<li>List item 1</li>
<li>List item 2</li>
<li>List item 3</li>
</ol>
<button id="btn1">Append text</button>
<button id="btn2">Append list items</button>
</body>
</html>
prepend示例：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>JQuery Demo</title>
<script src="scripts/jquery-1.9.1.js"></script>
<script>
$(document).ready(function () {
$("#btn1").click(function () {
$("p").prepend("<b>Prepended text</b>. ");
});
$("#btn2").click(function () {
$("ol").prepend("<li>Prepended item</li>");
});
});
</script>
</head>
<body>
<p>This is a paragraph.</p>
<p>This is another paragraph.</p>
<ol>
<li>List item 1</li>
<li>List item 2</