标签：
HTML：
<!DOCTYPE >
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>无标题文档</title>
<style type="text/css">
* {
margin: 10px;
padding: 0;
font-family: "微软雅黑", "arial", " sans-serif";
font-size: 14px;
}
button {
width: 120px;
height: 33px;
border-radius: 5px;
color: snow;
background: #5CA113;
font-weight: bold;
}
#ul li {
display: inline;
}
</style>
<script type="text/javascript" src="js/jquery-2.2.2.min.js">
</script>
<script type="text/javascript">
$(function () {
$("#append").click(function () {
$("#content").append("<b>使用append添加元素</b>")
});
$("#appendTo").click(function () {
$("<b>使用appendTo添加元素</b>").appendTo("#content");
});
$("#prepend").click(function () {
$("#content").prepend("<b>使用prepend插入前置内容</b>")
});
$("#prependTo").click(function () {
$("<b>使用prependTo插入前置内容</b>").prependTo("#content");
});
$("#before").click(function () {
$("#content").before("<b>使用before添加元素</b>")
});
$("#after").click(function () {
$("#content").after("<b>使用after添加元素</b>")
});
$("#insertBefore").click(function () {
$("<b>使用inserBefore添加元素</b>").insertBefore("#content");
});
$("#insertAfter").click(function () {
$("<b>使用insertAfter添加元素</b>").insertAfter("#content");
});
})
</script>
</head>
<body>
<ul id="ul">
<li>
<button id="append">append方法</button>
</li>
<li>
<button id="appendTo">appendTo方法</button>
</li>
<li>
<button id="prepend">prepend方法</button>
</li>
<li>
<button id="prependTo">prependTo方法</button>
</li>
<li>
<button id="before">before方法</button>
</li>
<li>
<button id="after">after方法</button>
</li>
<li>
<button id="insertBefore">insertBefore方法</button>
</li>
<li>
<button id="insertAfter">insertAfter方法</button>
</li>
</ul>
<div id="content" style="width: 580px;height: 160px;border: 1px red solid;font-size: 16px;color: red;"><p
style="color: black;font-size: 18px;"> 使用不同的按钮，用不同的方法插入页面</p></div>
</body>
</html>
result：
运行：
标签：
原文地址：http://www.cnblogs.com/theWayToAce/p/5495747.html
