在html页面中，我们可以使用jquery将需要新增的元素添加到指定元素的指定位置。
1. append()
append()方法可以在 目标元素内部 的 尾部 插入元素，插入的元素作为最后一个子元素。
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<html>
<head runat="server">
<meta http-equiv="pragram" content="no-cache" />
<meta http-equiv="cache-control" content="no-cache, must-revalidate" />
<meta http-equiv="expires" content="0" />
<meta charset="utf-8" />
<script src="js/jquery-1.11.0.min.js" type="text/javascript"></script>
</head>
<style>
*, html, body {
margin: 0;
padding: 0;
border: 0;
}
</style>
<script type="text/javascript">
// 在目标元素内部最后附加一个元素
$(function () {
$(".container").append('<li style="color:blue">第三个元素</li>');
})
</script>
<body>
<div id="content">
<h2>元素插入</h2>
<ul class="container">
<li>第一个元素</li>
<li>第二个元素</li>
</ul>
</div>
</body>
</html>
2. appendTo()
appendTo()方法将匹配元素插入到 目标元素 内部 的尾部。
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<html>
<head runat="server">
<meta http-equiv="pragram" content="no-cache" />
<meta http-equiv="cache-control" content="no-cache, must-revalidate" />
<meta http-equiv="expires" content="0" />
<meta charset="utf-8" />
<script src="js/jquery-1.11.0.min.js" type="text/javascript"></script>
</head>
<style>
*, html, body {
margin: 0;
padding: 0;
border: 0;
}
</style>
<script type="text/javascript">
// 在目标元素内部最后附加一个元素
$(function () {
$('<li style="color:blue">第三个元素</li>').appendTo(".container");
})
</script>
<body>
<div id="content">
<h2>元素插入</h2>
<ul class="container">
<li>第一个元素</li>
<li>第二个元素</li>
</ul>
</div>
</body>
</html>
3. prepend()
prepend()方法在目标元素内部的最前面插入指定的元素，并返回一个jQuery对象。指定的元素被插入到每个匹配元素里面的最前面，作为它的第一个子元素。
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<html>
<head runat="server">
<meta http-equiv="pragram" content="no-cache" />
<meta http-equiv="cache-control" content="no-cache, must-revalidate" />
<meta http-equiv="expires" content="0" />
<meta charset="utf-8" />
<script src="js/jquery-1.11.0.min.js" type="text/javascript"></script>
</head>
<style>
*, html, body {
margin: 0;
padding: 0;
border: 0;
}
</style>
<script type="text/javascript">
// 在目标元素内部最前面插入一个元素
$(function () {
$(".container").prepend('<li style="color:blue">第零个元素</li>');
})
</script>
<body>
<div id="content">
<h2>元素插入</h2>
<ul class="container">
<li>第一个元素</li>
<li>第二个元素</li>
</ul>
</div>
</body>
</html>
4. prependTo()
prependTo()方法将指定元素插入到 目标元素 内部 的最前面
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<html>
<head runat="server">
<meta http-equiv="pragram" content="no-cache" />
<meta http-equiv="cache-control" content="no-cache, must-revalidate" />
<meta http-equiv="expires" content="0" />
<meta charset="utf-8" />
<script src="js/jquery-1.11.0.min.js" type="text/javascript"></script>
</head>
<style>
*, html, body {
margin: 0;
padding: 0;
border: 0;
}
</style>
<script type="text/javascript">
//在目标元素内部最前面插入一个元素
$(function () {
$(".container").prepend('<li style="color:blue">第零个元素</li>');
})
</script>
<body>
<div id="content">
<h2>元素插入</h2>
<ul class="container">
<li>第一个元素</li>
<li>第二个元素</li>
</ul>
</div>
</body>
</html>
