实例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>3.添加或移动元素</title>
<style type="text/css">
li {
background-color: lightskyblue;
width: 300px;
margin-bottom: 5px;
}
p {
background-color: orange;
width: 300px;
}
</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>我是append()要移动的节点</p>
<p>我是prepend()要移动的节点</p>
<p>我是after()要移动的节点</p>
<p>我是before()要移动的节点</p>
</body>
</html>
<script type="text/javascript" src="./js/jquery-3.3.1.js"></script>
<script type="text/javascript">
//append(),prepend(),after(),before()
$('button').eq(0).on('click',function(){
/**
* 1.append()
*语法：target.append(content)
*参数：节点
*功能：插入到目标元素内容的后面
*/
//1.添加操作
//第一点：生成一个新节点
var li = $('<li>').text('我是append（）新生成的节点').css('background-color','lightgreen')
//第二步：将新节点插入到指定的位置
$('ul').append(li)
})
$('button').eq(1).on('click',function(){
var li = $('<li>').text('我是prepend（）新生成的节点').css('background-color','lightgreen')
$('ul').prepend(li)
})
$('button').eq(2).on('click',function(){
var li = $('<li>').text('我是after（）新生成的节点').css('background-color','lightgreen')
$('ul').after(li)
})
$('button').eq(3).on('click',function(){
var li = $('<li>').text('我是before（）新生成的节点').css('background-color','lightgreen')
$('ul').before(li)
})
//2.移动操作：
// $('ul').append('p:first') //语法错误,直接显示文本
$('button').eq(0).on('click',function(){
$('ul').append($('p:first')) //语法正确，正常移动
})
$('button').eq(1).on('click',function(){
$('ul').prepend($('p:eq(1)'))
})
$('button').eq(2).on('click',function(){
$('ul').after($('p:eq(2)'))
})
$('button').eq(3).on('click',function(){
$('ul').before($('p:eq(3)'))
})
// console.log(li)
</script>运行实例 »
点击 "运行实例" 按钮查看在线实例
