收藏
批改状态：合格
老师批语：
jQuery中appendTo(),prependTo(),insertAfter(),insertBefore()的用法：
1、appendTo()
语法：content.appendTo(target)
参数：要添加或移动到的节点
功能：插入到目标元素内容的后面
2、prependTo()
语法：content.prependTo(target)
参数：要添加或移动到的节点
功能：插入到目标元素内容的前面
3、insertAfter()
语法：content.insertAfter(target)
参数：要添加或移动到的节点
功能：插入到目标元素的后面
4、insertBefore()
语法：content.insertBefore(target)
参数：要添加或移动到的节点
功能：插入到目标元素的前面
下面用实例来演示一下这几个方法的用法：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>appendTo(),prependTo(),insertAfter(),insertBefore()的用法</title>
<style type="text/css">
ul li{
list-style: none;
}
ul li img{
width: 100px;
height: 100px;
}
</style>
</head>
<body>
<ul>
<li><img src="http://cloud.zhibo1314.com/1.jpg"></li>
<li><img src="http://cloud.zhibo1314.com/2.jpg"></li>
<li><img src="http://cloud.zhibo1314.com/3.jpg"></li>
<li><img src="http://cloud.zhibo1314.com/4.jpg"></li>
</ul>
<p>php是最好的编程语言</p>
<p>java是一门面向对象的编程语言</p>
<p>python是一种面向对象的解释型编程语言</p>
<p>javascript是一门基于客户端的脚本语言</p>
<button>appendTo()添加</button>
<button>appendTo()移动</button>
<button>prependTo()添加</button>
<button>prependTo()移动</button>
<button>insertAfter()添加</button>
<button>insertAfter()移动</button>
<button>insertBefore()添加</button>
<button>insertBefore()移动</button>
<script type="text/javascript" src="http://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
<script type="text/javascript">
$('button').eq(0).click(function(){
var php = $('<span>').css('color','red').text('php')
php.appendTo($('li:eq(0)'))
})
$('button').eq(1).click(function(){
$('p:first').appendTo($('li:eq(0)'))
})
$('button').eq(2).click(function(){
var java = $('<span>').css('color','red').text('java')
java.prependTo($('li:eq(1)'))
})
$('button').eq(3).click(function(){
$('p:eq(1)').prependTo($('li:eq(1)'))
})
$('button').eq(4).click(function(){
var python = $('<span>').css('color','red').text('python')
python.insertAfter($('li:eq(2)'))
})
$('button').eq(5).click(function(){
$('p:eq(2)').insertAfter($('li:eq(2)'))
})
$('button').eq(6).click(function(){
var js = $('<span>').css('color','red').text('javascript')
js.insertBefore($('li:eq(3)'))
})
$('button').eq(7).click(function(){
$('p:last').insertBefore($('li:last'))
})
</script>
</body>
</html>点击 "运行实例" 按钮查看在线实例
运行结果：
Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号
