实例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>4 添加或移动元素到目标节点</title>
<style type="text/css">
li {
background-color: lightskyblue;
width: 300px;
margin-bottom: 5px;
}
p {
background-color: orange;
width: 300px;
}
</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>我是appendTo()要移动的节点</p>
<p>我是prependTo()要移动的节点</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()
$('button').eq(0).on('click',function(){
/**
* 1.appendTo()
*语法：target.appendTo(content)
*语法优化：content.appendTo(target)
*参数：节点
*功能：插入到目标元素内容的后面
*/
//1.添加操作
//第一点：生成一个新节点
var li = $('<li>').text('我是appendTo()新生成的节点').css('background-color','lightgreen')
//第二步：将新节点插入到指定的位置
// $('ul').appendTo(li)
li.appendTo($('ul'))
//2.移动操作：针对页面中已经存在的节点
$('p:first').appendTo('ul')
//参数ul，则默认为ul后面；
//参数li,加eq: ，则为具体列表项的后面
// $('p:first').appendTo('li:first')
$('p:first').appendTo('li:eq(0)')
//console.log(li)
})
$('button').eq(1).on('click',function(){
/**
* 1.prependTo()
* 语法：target.prependTo(content)
* 语法优化：content.prependTo(target)
* 参数：节点
* 功能：插入到目标元素内容的前面
*/
//1.添加操作
//第一点：生成一个新节点
var li = $('<li>').text('我是prependTo()新生成的节点').css('background-color','lightgreen')
//第二步：将新节点插入到指定的位置
//$('ul').prependTo(li)
li.prependTo($('ul'))
//2.移动操作：针对页面中已经存在的节点
// $('ul').prepend($('p:eq(1)'))
// $('p:eq(1)').prependTo($('ul'))
//参数为ul，默认位置为ul的前面
//参数为li,则为不提列表项的前面
$('p:eq(1)').prependTo($('li:eq(2)'))
//console.log(li)
})
$('button').eq(2).on('click',function(){
/**
* 1.insertAfter()
* 语法：target.insertAfter(content)
* 语法优化：content.insertAfter(target)
* 参数：节点
* 功能：插入到目标元素后面
*/
//1.添加操作：
//第一步：生成一个新节点
var p = $('<p>').text('我是insertAfter()新生成的节点').css('background-color','lightgreen')
//第二步：将新节点插入到指定的位置
//$('ul').insertAfter(p)
p.insertAfter($('ul'))
//$('li:eq(1)').insertAfter(p)
p.insertAfter($('li:eq(3)'))
//2.移动操作：针对页面中已经存在的节点
// $('ul').insertAfter($('p:eq(1)'))
// $('p:eq(1)').insertAfter($('ul'))
//参数为ul，默认位置为ul的后面
//参数为li,则为不提列表项的后面
$('p:eq(3)').insertAfter($('li:eq(3)'))
//console.log(li)
})
//2.移动操作：针对页面中已经存在的节点
$('button').eq(3).on('click',function(){
/**
* 1.insert.insertBefore()
* 语法：target.insertBefore(content)
* 语法优化：content.insertBefore(target)
* 参数：节点
* 功能：插入到目标元素后面
*/
//1.添加操作
//第一步：生成一个新节点
var p = $('<p>').text('我是insertBefore()新生成的节点').css('background-color','lightgreen')
//第二步：降所有新节点插入到指定的位置
//$('ul').insertBefore(p)
p.insertBefore($('ul'))
//$('li:eq(2)').insertBefore(p)
p.insertBefore($('li:eq(4)'))
//2.移动操作：针对页面中已经存在的节点
// $('ul').insertBefore($('p:eq(1)'))
// $('p:eq(1)').insertBefore($('ul'))
//参数为ul，默认位置为ul的前面
//参数为li,则为不提列表项的前面
$('p:eq(4)').insertBefore($('li:eq(4)'))
//console.log(li)
})
</script>运行实例 »
点击 "运行实例" 按钮查看在线实例
