代码：
实例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>zuoye</title>
<style type="text/css">
li {
background-color:pink;
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()移动的节点1</li>
<p style="background-color: orange;width: 300px;">我是要被prependTo()移动的节点2</li>
<p style="background-color: orange;width: 300px;">我是要被insertAfter()移动的节点3</li>
<p style="background-color: orange;width: 300px;">我是要被insertBefore()移动的节点4</li>
</body>
</html>
<script type="text/javascript" src="../js/jquery-3.3.1.js"></script>
<script type="text/javascript">
// 1.appendTo()
// 语法: content.appendTo(target)
// 参数: 要添加或移动到的节点
// 功能: 插入到目标元素内容的后面
$('button').eq(0).on('click',function(){
// 1. 添加操作
var li = $('<li>')
.html('我是appendTo()新生成的节点1')//生成节点元素,内容
.css('background-color','lightgreen')//设置样式
.appendTo($('ul'))//将新节点插入到目标节点内容的后面
//2.移动操作
// $('p:first').appendTo($('ul'))
})
// 2.prependTo()
// * 语法: content.prepend(target)
// * 参数: 要添加或移动的节点
// * 功能: 插入到目标元素内容的前面
$('button').eq(1).on('click',function(){
//1. 添加操作
var li = $('<li>')
.html('我是prependTo()新生成的节点2')//生成节点元素,添加内容
.css('background-color','lightgreen')//设置样式
.prependTo($('ul'))//将新节点插入到目标节点内容的后面
//2.移动操作
// $('p:eq(1)').prependTo($('ul'))
})
// 3.insertAfter()
// * 语法: content.after(target)
// * 参数: 要插入的节点
// * 功能: 插入到目标节点的后面
$('button').eq(2).on('click',function(){
//1. 添加操作
var p = $('<li>')
.html('我是insertAfter()新生成的节点3')//生成节点元素,添加内容
.css('background-color','lightgreen')//设置样式
.insertAfter($('ul'))//将新节点插入到目标节点的后面
//2.移动操作
// $('p:eq(2)').insertAfter($('ul'))
})
// 4.InsertBefore()
// * 语法: content.insertBefore(target)
// * 参数: 要插入的节点
// * 功能: 插入到目标元素的前面
$('button').eq(3).on('click',function(){
//1. 添加操作
var p = $('<li>')
.html('我是insertBefore()新生成的节点4')//生成节点元素,添加内容
.css('background-color','lightgreen')//设置样式
.insertBefore($('ul'))//将新节点插入到目标节点的后面
//2.移动操作
// $('p:eq(3)').insertBefore($('ul'))
})
</script>运行实例 »
点击 "运行实例" 按钮查看在线实例
