这一节学习了appendTo(),prependTo(),insertAfter(),insertBefore()这几个jquery的方法
其实这几个方法就跟append(),prepend(),after(),before()的意思是一样的，只是顺序不同，类似语文中的“把”和“被”。
appendTo()：把节点添加或移动到目标节点的内容最后
prependTo()：把节点添加或移动到目标节点的内容之前
insertAfter()：把节点添加或移动到目标节点的之后
insertBefore()：把节点添加或移动到目标节点的之前
实例
<!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;
}
</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: orange; width: 300px;">我是appendTo()移动的节点</p>
<p style="background-color: orange; width: 300px;">我是prependTo()移动的节点</p>
<p style="background-color: orange; width: 300px;">我是insertAfter()移动的节点</p>
<p style="background-color: orange; width: 300px;">我是insertBefore()移动的节点</p>
</body>
</html>
<script type="text/javascript" src="../js/jquery-3.3.1.js"></script>
<script type="text/javascript">
// appendTo(),prependTo(),insetafter(),insertBefore()
$('button').eq(0).on('click',function(){
// 1.appendTo()
// 语法：content.appendTo(target)
// 参数：节点
// 功能：插入到目标元素内容的后面
// 1.添加操作
// 第一步：创建一个节点
var li = $('<li>').text('我是appendTo()生成的节点').css('background-color','lightgreen')
// 第二步：将节点添加到指定位置
// $('ul').appendTo(li)
li.appendTo($('ul'))
// 移动操作：针对页面中已经存在的元素
$('p:first').appendTo($('ul'))
})
// 2.prependTo()
$('button').eq(1).on('click',function(){
// 1.prepend()
// 语法：target.prepend(content)
// 参数：节点
// 功能：插入到目标元素内容的前面
// 1.添加操作
// 第一步：创建一个节点
var li = $('<li>').text('我是prependTo()生成的节点').css('background-color','lightgreen')
// 第二步：将节点添加到指定位置
li.prependTo($('ul'))
// 2.移动操作
// $('p:first').prependTo($('ul')) first:移动第一个，eq(1)：移动第二个
$('p:eq(1)').prependTo($('ul'))
})
// 3.insertAfter()
$('button').eq(2).on('click',function(){
// 1.insertAfter()
// 语法：content.insertAfter(target)
// 参数：节点
// 功能：插入到目标元素内容的后面
// 1.添加操作
// 第一步：创建一个节点
var li = $('<li>').text('我是insertAfter()生成的节点').css('background-color','lightgreen')
// 第二步：将节点添加到指定位置
// $('ul').insertAfter(li)
// 在第二个元素后添加
li.insertAfter($('li:eq(1)'))
// 2.移动操作：移动到标签后
// $('p:first').insertAfter($('ul')) first:移动第一个，eq(1)：移动第二个
$('p:eq(2)').insertAfter($('ul'))
})
// 4.insertBefore()
$('button').eq(3).on('click',function(){
// 1.insertBefore()
// 语法：content.insertBefore(target)
// 参数：节点
// 功能：插入到目标元素内容的前面
// 1.添加操作
// 第一步：创建一个节点
var li = $('<li>').text('我是insertBefore()生成的节点').css('background-color','lightgreen')
// 第二步：将节点添加到指定位置
// li.insertBefore($('ul'))
// 在第二个元素前添加
li.insertBefore($('li:eq(1)'))
// 2.移动操作
$('p:first').insertBefore($('ul'))
// first:移动第一个，eq(3)：移动第四个
$('p:eq(3)').insertBefore($('ul'))
//链式操作
var li = $('<li>') //创建 li标签
.text('我是appendTo新生成的节点') //给li标签添加文本
.css('background-color','lightgreen') //设置li标签的样式
.appendTo($('ul')) //将li标签添加到 ul标签内容的最后
})
</script>运行实例 »
点击 "运行实例" 按钮查看在线实例
