实例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
li{
background-color: lightblue;
margin-bottom: 5px;
}
p{
background-color: coral;
}
</style>
</head>
<body>
<ul>
<li>列表项1</li>
<li>列表项2</li>
<li>列表项3</li>
<li>列表项4</li>
<li>列表项5</li>
</ul>
<button>appendTo()</button>
<button>prependTo()</button>
<button>insertAfter()</button>
<button>insertBefore()</button>
<p>我是append()要移动的元素</p>
<p>我是prepend()要移动的元素</p>
<p>我是insertAfter()要移动的元素</p>
<p>我是insertBefore()要移动的元素</p>
</body>
</html>
<script type="text/javascript" src="../js/jquery-3.3.1.js"></script>
<script type="text/javascript">
/**
*把元素添加或移动到某节点内容的后面或前面：appendTo(),prependTo()
*把元素添加或移动到某节点的后面或前面：insertAfter()，insertBefore()
*/
//1.element.appendTo(target)
$('button').eq(0).on('click',function(){
// 把元素添加到节点内容的最后
// var p = $('<p>我是append添加的内容</p>')
// p.appendTo($('ul'))
// 移动元素到节点内容的最后
// $('p').eq(0).appendTo($('ul'))
})
// 2.element.prependTo(target)
$('button').eq(1).on('click',function(){
//把元素添加到节点内容的最前面
// var p = $('<p>我是prepend添加的内容</p>')
// p.prependTo($('ul'))
// 把元素移动到节点内容的最前面
$('p:eq(1)').prependTo('ul')
})
// 3.element.insertAfter(target)
$('button').eq(2).on('click',function(){
// 把元素添加到节点的后面
// var p = $('<p>我是insertAfter添加的内容</p>')
// p.insertAfter('li:eq(2)')
// 把元素移动到节点的后面
// $('p:eq(2)').insertAfter('li:eq(2)')
})
// 4.element.insertBefore(target)
$('button').eq(3).on('click',function(){
// 把元素添加到某节点的前面
var p = $('<p>我是insertBefore添加的内容</p>')
// p.insertBefore('li:eq(2)')
// 把元素添加到某节点的后面
$('p:eq(3)').insertBefore('li:eq(1)')
})
</script>运行实例 »
点击 "运行实例" 按钮查看在线实例
