收藏
批改状态：未批改
老师批语：
appendTo(),prependTo(),insertAfter(),insertBefore()用法：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>appendTo(),prependTo(),insertAfter(),insertBefore()用法</title>
<style type="text/css">
li {
background-color: lightgreen;
margin: 10px;
}
p {
background-color: lightblue;
}
</style>
</head>
<body>
<ul>
<li>我是节点1</li>
<li>我是节点2</li>
<li>我是节点3</li>
<li>我是节点4</li>
</ul>
<button>appendTo</button>
<button>prependTo</button>
<button>insertAfte</button>
<button>insertBefore</button>
<p>我是插入1</p>
<p>我是插入2</p>
<p>我是插入3</p>
<p>我是插入4</p>
</body>
</html>
<script type="text/javascript" src="../js/jquery-3.3.1.js"></script>
<script type="text/javascript">
// append()和appendTo()用法
// 点击第一个按钮执行事件
$('button:eq(0)').click(function () {
// 1.添加操作
// 添加一个新的节点用<li>,生成样式css，添加内容html
// var li = $('<li>').css('background-color','red').html('我是新生成的节点')
// 将新的节点插入目标节点内容的后面
// $('ul').append(li)
// li.appendTo($('ul'))
// 2.移动操作
// $('ul').append($('p:eq(0)'))
$('p:eq(0)').appendTo($('ul'))
})
// prepend()和prependTo()用法
$('button:eq(1)').click(function(){
//1.添加操作
var li = $('<li>').css('background-color','red').html('我是新生成的节点')
// 将新节点插入到目标内容的前面
// $('ul').prepend(li)
li.prependTo($('ul'))
//2.移动操作
// $('ul').prepend($('p:eq(1)'))
// $('p:eq(1)').prependTo($('ul'))
})
// after()和insertAfter()用法
$('button:eq(2)').click(function(){
//1.添加操作
// var li = $('<li>').css('background-color','red').html('我是新生成的节点')
// 将新的节点插入目标节点后面
// $('li:eq(2)').after(li)
// li.insertAfter($('li:eq(2)'))
// 2.移动操作
// $('li:eq(2)').after($('p:eq(2)'))
// $('p:eq(2)').insertAfter($('li:eq(2)'))
// 链式操作
var li = $('<li>').css('background-color','red').html('我是新生成的节点').insertAfter($('li:eq(2)'))
})
// before()和insertBefore()用法
$('button:eq(3)').click(function(){
//1.添加操作
// var li = $('<li>').css('background-color','red').html('我是新生成的节点')
// 将新的节点插入目标节点前面
// $('li:eq(3)').before(li)
// li.insertBefore($('li:eq(3)'))
// 2.移动操作
// $('li:eq(3)').before($('p:eq(3)'))
// $('p:eq(3)').insertBefore( $('li:eq(3)'))
// 链式操作
var li = $('<li>').css('background-color','red').html('我是新生成的节点').insertBefore($('li:eq(3)'))
})
</script>点击 "运行实例" 按钮查看在线实例
总结：
append()和appendTo()……实现的功能都一样。appendTo(),prependTo(),insertAfter(),insertBefore()可以进行链式操作。所以更常用。
Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号
