收藏
批改狀態(tài)：合格
老師批語：
jQuery中appendTo(),prependTo(),insertAfter(),insertBefore()的用法：
1、appendTo()
語法：content.appendTo(target)
參數：要添加或移動到的節(jié)點
功能：插入到目標元素內容的后面
2、prependTo()
語法：content.prependTo(target)
參數：要添加或移動到的節(jié)點
功能：插入到目標元素內容的前面
3、insertAfter()
語法：content.insertAfter(target)
參數：要添加或移動到的節(jié)點
功能：插入到目標元素的后面
4、insertBefore()
語法：content.insertBefore(target)
參數：要添加或移動到的節(jié)點
功能：插入到目標元素的前面
下面用實例來演示一下這幾個方法的用法：
<!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 http://ipnx.cn/ All Rights Reserved | php.cn | 湘ICP備2023035733號
