拣昂赦瑰泰荣寥睡及罗残乃搭
原始结构：
<!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>append()</button>
<button>prepend()</button>
<button>after()</button>
<button>before()</button>
<p style="background-color:coral;width:300px;">我是append()要移动的节点</p>
<p style="background-color:coral;width:300px;">我是prepend()要移动的节点</p>
<p style="background-color:coral;width:300px;">我是after()要移动的节点</p>
<p style="background-color:coral;width:300px;">我是before()要移动的节点</p>
</body>
</html>
<script type="text/javascript" src="../jquery/jquery-3.3.1.js"></script>
<script type="text/javascript">
</script>
执行：
1.插入位置:
1.1:节点内容的前后
1.2:节点的前后
节点与内容的区别：对于下方的代码，列表项1是对应li的内容，li是节点。li是ul的内容，ul是节点
<ul> <li>列表项1</li> <li>列表项2</li> <li>列表项3</li> <li>列表项4</li> <li>列表项5</li> </ul>
图示：
图示：
2.要插入的节点:
2.1: 对于新创建的节点:叫添加操作
1.append()
语法: target.append(content)
参数: 要添加或移动的节点
功能: 插入到目标元素内容的后面
目标：将新生成的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(){
//1.创建节点li
var li=$("<li>").text('我是append()新生成的节点').css('background-color',"lightpink")
//2.将节点添加到ul的内容后面 只有一个ul 不写eq(0)也可以
$('ul').eq(0).append(li)
})
</script>
执行，点击append()按钮
2.2: 对已存在的节点: 叫移动操作
将第1个p标签移动到ul的内容后面，即最后一个li的后面
注意：移动的必须是jquery对象
<script type="text/javascript" src="../jquery/jquery-3.3.1.js"></script>
<script type="text/javascript">
$('button').eq(0).on('click',function(){
$('ul').eq(0).append("p:first")
})
</script>
执行，点击append()按钮，发现并没有移动第一个p标签 因为移动的不是 jquery对象
修正：
<script type="text/javascript" src="../jquery/jquery-3.3.1.js"></script>
<script type="text/javascript">
$('button').eq(0).on('click',function(){
$('ul').eq(0).append($("p:first"))
})
</script>
执行：
2.prepend()
语法: target.prepend(content)
参数: 要添加或移动的节点
功能: 插入到目标元素内容的前面
2-1将生成的li添加到ul内容的前面，即第一个li前面
<script type="text/javascript" src="../jquery/jquery-3.3.1.js"></script>
<script type="text/javascript">
$('button').eq(1).on('click',function(){
//1.创建节点li
var li=$("<li>").text('我是prepend()新生成的节点').css('background-color',"lightpink")
//2.将节点添加到ul的内容前面 只有一个ul 不写eq(0)也可以
$('ul').eq(0).prepend(li)
})
</script>
执行，点击prepend()
2-2prepend()移动第2个p标签到ul内容的前面，即第1个li前面
<script type="text/javascript" src="../jquery/jquery-3.3.1.js"></script>
<script type="text/javascript">
$('button').eq(1).on('click',function(){
$('ul').eq(0).prepend($("p:eq(1)"))
})
</script>
执行，点击prepend()
3.after()
语法: target.after(content)
参数: 要插入的节点
功能: 插入到目标节点的后面
3-1将生成的p标签添加到ul标签后面，即ul与第一个p标签之间
<script type="text/javascript" src="../jquery/jquery-3.3.1.js"></script>
<script type="text/javascript">
$('button').eq(2).on('click',function(){
//1.创建节点li
var p=$("<p>").text('我是after()新生成的节点').css('background-color',"lightpink")
//2.将节点添加到ul标签后面 只有一个ul 不写eq(0)也可以
$('ul').after(p)
})
</script>
执行，点击after()
3-2将第3个p移动到ul标签后面，即ul与第一个p标签之间
<script type="text/javascript" src="../jquery/jquery-3.3.1.js"></script>
<script type="text/javascript">
$('button').eq(2).on('click',function(){
$('ul').after($("p:eq(2)"))
})
</script>
执行，点击after()
4.before()
语法: target.after(content)
参数: 要插入的节点
功能: 插入到目标元素的前面
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 p=$("<p>").text('我是before()新生成的节点').css('background-color',"lightpink")
$('ul').before(p)
})
</script>
执行，点击before
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(){
$('ul').before($('p:eq(3)'))
})
</script>
执行，点击before
总结.对应的有四个方法
3.1:插入到节点内容之后:append()
3.2:插入到节点内容之前:prepend()
3.3:插入到节点之后: after()
3.3:插入到节点之前: before()
使用这些方法可以对界面的任何元素进行操作
在线测试：
迁揪对绰垄视氛探须革无间杠