动态插入节点

最新推荐文章于 2024-10-11 17:39:47 发布

bangxionger9224

最新推荐文章于 2024-10-11 17:39:47 发布

阅读量126

点赞数

文章标签： javascript ViewUI

原文链接：http://www.cnblogs.com/theWayToAce/p/5495747.html

版权

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>