实例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
ul{
width: 60%;
margin:auto;
}
li{
width:100%;
height:50px;
list-style: none;
margin:10px 0;
background-color:lightgreen;
}
div{
width:60%;
margin:auto;
}
</style>
</head>
<body>
<!-- appendTo(),prependTo(),insertAfter(),insertBefore() -->
<ul>
<li id='one'>啦啦啦德玛西亚</li>
</ul>
<div>
<button>appendTo()</button>
<button>prependTo()</button>
<button>insertAfter()</button>
<button>insertBefore()</button>
</div>
<script type="text/javascript" src="http://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js
"></script>
<script>
/*a.appendTo('b'); 将标签A插入到标签B的子元素的后面*/
$('button').eq(0).on('click',function(){
var li = $('<li>').html('appendTo()');
li.appendTo('ul');
})
/*a.prependTo('b'); 将标签A插入到标签B的子元素的前面*/
$('button').eq(1).on('click',function(){
var li = $('<li>').html('prependTo()');
li.prependTo($('ul'));
})
/*a.insertAfter('b'); 将标签A插入到标签B的后面*/
$('button').eq(2).on('click',function(){
var li = $('<li>').html('-1');
li.insertAfter('#one');
});
/*a.insertBefore('b'); 将标签A插入到标签B的前面*/
$('button').eq(3).on('click',function(){
var li = $('<li>').html('+1');
li.insertBefore('#one');
});
</script>
</body>
</html>运行实例 »
点击 "运行实例" 按钮查看在线实例
