护椿期操墙巧俄且卧渭颁坟化
这4种方法与16-3中的方法相比只是参数的位置不一样，其他的没有任何区别
/********************************************************
* 1.插入位置:
* 1.1:节点内容的前后
* 1.2:节点的前后
* 2.要插入的节点:
* 2.1: 对于新创建的节点:叫添加操作
* 2.2: 对已存在的节点: 叫移动操作
* 3.所以对应的应该有四个方法
* 3.1:插入到节点内容之后:appendTo()
* 3.2:插入到节点内容之前:prependTo()
* 3.3:插入到节点之后: InsertAfter()
* 3.3:插入到节点之前: InsertBefore() *
*********************************************************/
初始结构：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
li
{
background-color: lightskyblue;
width:300px;
margin-bottom: 10px;
}
</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 style="background-color:coral;width:300px;">我是appendTo()要移动的节点</p>
<p style="background-color:coral;width:300px;">我是prependTo()要移动的节点</p>
<p style="background-color:coral;width:300px;">我是insertAfter()要移动的节点</p>
<p style="background-color:coral;width:300px;">我是insertBefore()要移动的节点</p>
</body>
</html>
<script type="text/javascript" src="../jquery/jquery-3.3.1.js"></script>
<script type="text/javascript">
</script>
执行：
/**
* 1.appendTo()
* 语法: content.appendTo(target)
* 参数: 要添加或移动到的节点
* 功能: 插入到目标元素内容的后面
*/
1-1将生成的li添加到ul内容的后面，即第5个li后面
<script type="text/javascript" src="../jquery/jquery-3.3.1.js"></script>
<script type="text/javascript">
$('button:eq(0)').on('click',function(){
var li=$("<li>").text('我是appendTo()新生成的节点').css('background-color','lightcoral')
li.appendTo($('ul'))
})
</script>
执行，点击appendTo：
1-2 将第一个p标签移动到ul内容的后面；
<script type="text/javascript" src="../jquery/jquery-3.3.1.js"></script>
<script type="text/javascript">
$('button:eq(0)').on('click',function(){
$('p:first').appendTo($('ul'))
})
</script>
执行，点击appendTo()
/**
* 2.prependTo()
* 语法: content.prepend(target)
* 参数: 要添加或移动的节点
* 功能: 插入到目标元素内容的前面
*/
2-1 将新生成的li添加到ul的内容前面
<script type="text/javascript" src="../jquery/jquery-3.3.1.js"></script>
<script type="text/javascript">
$('button:eq(1)').on('click',function(){
var li=$("<li>").text('我是prependTo()新生成的节点').css('background-color','lightcoral')
li.prependTo($('ul'))
})
</script>
执行，点击prependTo：
2-2将第2个p标签移动到ul内容的前面
<script type="text/javascript" src="../jquery/jquery-3.3.1.js"></script>
<script type="text/javascript">
$('button:eq(1)').on('click',function(){
$('p').eq(1).prependTo($('ul'))
})
</script>
执行，点击prependTo:
/**
* 3.insertAfter()
* 语法: content.after(target)
* 参数: 要插入的节点
* 功能: 插入到目标节点的后面
*/
3-1将新生成的p标签添加到ul标签的后面
<script type="text/javascript" src="../jquery/jquery-3.3.1.js"></script>
<script type="text/javascript">
$('button:eq(2)').on('click',function(){
var li=$("<p>").text('我是insertAfter()新生成的节点').css('background-color','lightcoral')
li.insertAfter($('ul'))
})
</script>
执行，点击insertAfter
3-2将第3个p标签移动到ul标签的后面
<script type="text/javascript" src="../jquery/jquery-3.3.1.js"></script>
<script type="text/javascript">
$('button:eq(2)').on('click',function(){
$("p").eq(2).insertAfter($('ul'))
})
</script>
执行，点击insertAfter
/**
* 4.InsertBefore()
* 语法: content.insertBefore(target)
* 参数: 要插入的节点
* 功能: 插入到目标元素的前面
*/
4-1 将新生成的p标签移动到ul标签的前面
<script type="text/javascript" src="../jquery/jquery-3.3.1.js"></script>
<script type="text/javascript">
$('button:eq(3)').on('click',function(){
var li=$("<p>").text('我是insertBefore()新生成的节点').css('background-color','lightcoral')
li.insertBefore($('ul'))
})
</script>
执行，点击insertBefore
4-2 将第4个p标签移动到ul标签的前面
<script type="text/javascript" src="../jquery/jquery-3.3.1.js"></script>
<script type="text/javascript">
$('button:eq(3)').on('click',function(){
$("p:eq(3)").insertBefore($('ul'))
})
</script>
执行，点击insertBefore
使用这4种方法的好处在于，可以链式调用，并且方便写注释，这在框架中使用的非常普遍
<script type="text/javascript" src="../jquery/jquery-3.3.1.js"></script>
<script type="text/javascript">
$('button:eq(3)').on('click',function(){
$("<p>")//生成p标签
.text('我是insertBefore()新生成的节点')//添加文本
.css('background-color','lightcoral')//设置样式
.insertBefore($('ul'))//添加到节点中
})
</script>
执行，点击insertBefore：
鸵纲看们绵辨钨浆显淖桓端忿