效果图
代码
实例
实例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>地铁发车顺序表</title>
<style type="text/css">
h2{
text-align:center;
}
li{
font-size:1.4em;
background-color: lightskyblue;
width: 300px;
margin-bottom: 10px;
border-radius:25%;
box-shadow:2px 5px 10px rgba(0,0,0,0.5);
text-align: center;
}
</style>
</head>
<body>
<h2>地铁发车顺序表</h2>
<ul>
<li>01号列车</li>
<li>02号列车</li>
<li>03号列车</li>
<li>04号列车</li>
<li>05号列车</li>
</ul>
<button>加末班车appendTo()</button>
<button>加首班车prependTo()</button>
<button>2号车后加塞insertAfter()</button>
<button>5号前加塞insertBefore()</button>
<p style="background-color: orange;width: 300px;">加班末车appendTo()移动到位</li>
<p style="background-color: orange;width: 300px;">加班首车prependTo()移动到位</li>
<p style="background-color: orange;width: 300px;">临时调配车insertAfter()移动到位</li>
<p style="background-color: orange;width: 300px;">插队车insertBefore()移动到位</li>
</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>')
.css('background-color','lightgreen')
.html('我是末班车')
.appendTo($('ul')) //插入到目标元素内容的后面
$('p:first').appendTo($('ul'))//移动操作
})
$('button').eq(1).on('click',function(){
var li = $('<li>')
.css('background-color','lightgreen')
.html('我是首班车')
.prependTo($('ul')) //插入到目标元素内容的前面
$('p:eq(1)').prependTo($('ul'))//移动操作
})
$('button').eq(2).on('click',function(){
var li = $('<li>')
.css('background-color','lightgreen')
.html('我是加班车')
.insertAfter($('li:eq(1)')) //插入到目标元素内容的前面
$('p:eq(2)').insertAfter($('li:eq(2)'))//移动操作
})
$('button').eq(3).on('click',function(){
var li = $('<li>')
.css('background-color','lightgreen')
.html('我是后加班车')
.insertBefore($('li:eq(4)')) //插入到目标元素内容的前面
$('p:eq(3)').insertBefore($('li:eq(4)'))//移动操作
})
</script>运行实例 »
点击 "运行实例" 按钮查看在线实例
