四种常见添加节点或移动节点
代码如下：
实例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>0408作业</title>
<style type="text/css">
ul{
padding:0;
margin: 0;
text-align: center;
}
li{
list-style: none;
background-color: gray;
color: black;
width: 500px;
padding-bottom: 10px;
}
h2 , p{
padding-bottom: 10px;
width: 500px;
background-color:gray;
}
button{
width: 100px;
height: 50px;
border: none;
background-color: #ff8000;
margin-left: 15px;
}
</style>
</head>
<body>
<ul>
<li>春眠不觉晓</li>
<li>夜来风雨声</li>
</ul>
<button>1</button>
<button>2</button>
<button>3</button>
<button>4</button>
<p>花落知多少</p>
<h2>春晓</h2>
<p>处处闻啼鸟</p>
</body>
</html>
<script type="text/javascript" src="http://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
<script type="text/javascript">
$("button").eq(0).on("click",function(){
var li = $("<li>").text("花落知多少")
.css("backgroundColor","gray")
// li.appendTo($("ul"))
$("p").eq("0").appendTo("ul")
})
$("button").eq(1).on("click",function(){
var li = $("<li>").html("<h2>春晓</h2>")
.css("backgroundColor","gray")
// .prependTo("ul")
$("h2").prependTo("ul")
})
$("button").eq(2).on("click",function(){
var li = $ ("<li>").text("处处闻啼鸟")
.css("backgroundColor","gray")
// .insertAfter($("li:eq(0)"))
$("p").eq(1).insertAfter($("li:eq(0)"))
})
$("button").eq(3).on("click",function(){
var p = $("p").html("作者介绍: 唐代:孟浩然作者介绍")
.css("backgroundColor","gray")
// .insertBefore($("li:eq(0)"))
$("p").eq(2).insertBefore($("li:eq(0)"))
})
</script>运行实例 »
点击 "运行实例" 按钮查看在线实例
效果图：
