<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>将节点添加或移动到目标节点</title>
<!-- 利用这个机会再重新巩固一下以前学习的知识，古人云：温故而知新，两天不复习，什么都忘了~~ -->
<style type="text/css">
ul:nth-child(1) li {
background-color: lightskyblue;
border-radius: 20%;
height: 30px;
width: 400px;
line-height: 30px;
margin-top: 5px;
text-align: center;
}
ul:nth-child(1) li:nth-child(3),ul:nth-child(1) li:nth-child(5) {
background-color: lightgreen;
}
.mobile li {
background-color: cyan;
width: 300px;
height: 40px;
box-shadow: 3px 3px 2px #666;
margin-top: 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>
<ul>
<li>我是appendTo()移动的节点</li>
<li>我是prependTo()移动的节点</li>
<li>我是insertAfter()移动的节点</li>
<li>我是insertBefore()移动的节点</li>
</ul>
</body>
</html>
<script type="text/javascript" src="../js/jquery-3.3.1.js"></script>
<script type="text/javascript">
// 第一个案例，关于appendTo（）的操作，appendTo的功能是将当前节点作为子元素添加到目标节点内容之后
// 语法：content.appendTo(target)
$('button').eq(0).on('click',function(){
var li = $('<li>').css('background-color','green').html('我是appendTo创建的新节点')
// 将创建的li节点添加到第一个ul中，作为列表6存在，继承ul的样式
li.appendTo($('ul:eq(0)'))
})
$('button').eq(0).on('click',function(){
// 将页面中第二个ul中的指定li节点添加到第一个ul中
$('.mobile li:eq(0)').appendTo($('ul:eq(0) '))
})
// 第二个案例，prependTo（）的操作，prependTo（）的功能是将指定节点作为子元素添加到目标节点内容之前
// 语法：content.prependTo(target)
$('button:eq(1)').click(function(){
var li = $('<li>').css('background-color','green').html('我是prependTo()创建的新节点')
// 将新建的li节点添加到第一个ul中，作为列表1存在，继承ul的样式设定
li.prependTo($('ul').eq(0))
})
$('button:eq(1)').click(function(){
$('ul.mobile li').eq(1).prependTo($('ul').eq(0))
})
// 第三个案例，insertAfter()操作，insertAft（）的功能是将指定节点作为并列节点插入目标节点后面
// 语法：content.insertAfter(target)
// 首先建立一个新的li节点，并给其设置样式
$('button').eq(2).on('click',function(){
var li = $('<li>').css({
'background-color':'red',
'color':'black',
'height':35,
}).html('我是insertAfter（）创建的新节点')
//将新建的li节点作为并列元素插入到第一个ul的后面，二者是并列关系，li保持原有样式设定，不继承原ul的样式
li.insertAfter($('ul:eq(0)'))
})
$('button').eq(2).on('click',function(){
$('.mobile li:eq(2)').insertAfter('ul:eq(0)')
})
//第四个案例，insertBofore（）操作，insert Bofore（）的功能是将指定节点作为并列节点插入到目标节点前，与目标节点是平级关系
//语法：content.insertBefore(target)
$('button:eq(3)').on('click',function(){
var li = $('<li>').css('background-color','red').height('40px').html('我是insertBefore（）创建的节点')
//新建的li插入到第一个ul的前面，保留自身的样式设计，但由于本例css样式指定的是第一个lu，受此影响，第一个ul因此li的插入变成了第二个序列，样式消失
li.insertBefore('ul:eq(0)')
})
$('button').eq(3).on('click',function(){
$('.mobile li:eq(3)').insertBefore('ul:eq(0)')
})
</script>
