收藏
批改狀態(tài)：未批改
老師批語(yǔ)：
重點(diǎn)：
append方法：append所選元素最后面增加
prepend方法：prepend所選元素的最前面添加
after方法:after所選元素后一個(gè)添加
before方法：before所選元素前一個(gè)添加
appendTo方法：appendTo插入到指定節(jié)點(diǎn)的后面
prependTo方法：prependTo是插入指定節(jié)點(diǎn)最前，方法跟其他一致
insertAfter方法：insertAfter插入到指定節(jié)點(diǎn)后一個(gè)，方法跟其他的一致
insertbefore：insertbefore插入到指定節(jié)點(diǎn)前一個(gè)，方法跟其他的一致
-
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
<title>Document</title>
<style type="text/css">
li {
list-style: none;
margin: 20px;
}
</style>
</head>
<body>
<ul>
<li>append方法</li>
<li>prepeng方法</li>
<li>after方法</li>
<li>befort方法</li>
</ul>
<button>append方法改變</button>
<button>prepeng方法改變</button>
<button>after方法改變</button>
<button>befort方法改變</button>
<p>增加第一個(gè)被移動(dòng)的</p>
<p>增加第二個(gè)被移動(dòng)的</p>
<p>增加第三個(gè)被移動(dòng)的</p>
<p>增加第四個(gè)被移動(dòng)的</p>
</body>
<script src="http://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
//append方法：所選元素最后面增加
// $('button').eq(0).on('click',function(){
// var li=$('<li>').text('你說(shuō)這樣的辦法對(duì)不對(duì)？').css('background','red')
// $('ul').append(li)
// })
// //eq0等于第一個(gè)
// //on的寫法是（'時(shí)間'，'運(yùn)行'）
// //text新增文本
// //append（li），直接把生成的變量讓append函數(shù)獲取
// //prepend方法：所選元素的最前面添加
// $('button').eq(1).on('click',function(){
// var li=$('<li>').text('你說(shuō)這樣的辦法對(duì)不對(duì)？').css('background','red')
// $('ul').prepend(li)
// })
// //after方法:所選元素后一個(gè)添加
// $('button').eq(2).on('click',function(){
// var li=$('<li>').text('你說(shuō)這樣的辦法對(duì)不對(duì)？').css('background','orange')
// $($('li:eq(1)')).after(li)
// })
// //before方法：所選元素前一個(gè)添加
// $('button').eq(3).on('click',function(){
// var li=$('<li>').text('你說(shuō)這樣的辦法對(duì)不對(duì)？').css('background','orange')
// $($('li:eq(3)')).before(li)
// })
// //before方法移動(dòng)插入
// $('button').eq(3).on('click',function(){
// var li=$('<li>').text('你說(shuō)這樣的辦法對(duì)不對(duì)？').css('background','orange')
// $($('li:eq(3)')).before($('p:eq(0)'))
// })
//appendTo方法，插入到目標(biāo)節(jié)點(diǎn)的后面
$('button').eq(0).on('click',function(){
var li=$('<li>').css('background','blueviolet').html('這樣的操作可以吧')
li.appendTo($('ul'))
})
//appendTo方法，是插入方法，插入語(yǔ)法為：目標(biāo).appendto（$（'插入到哪里'））
//appendTo方法，也是插入到目標(biāo)元素最后的方法
$('button').eq(1).on('click',function(){
var li=$('<li>').css('background','#008000').html('這樣的操作不行')
li.prependTo($('ul'))
})
//prependTo方法是插入元素最前，方法跟其他一致
$('button').eq(2).on('click',function(){
var li=$('<li>').css('background','#008000').html('這樣的操作不行')
li.insertAfter($('li:eq(2)'))
})
//insertAfter插入到指定元素后一個(gè)，方法跟其他的一致
$('button').eq(3).on('click',function(){
var li=$('<li>').css('background','#008000').html('這樣的操作不行')
li.insertBefore($('li:eq(1)'))
})
//insertbefore插入到指定元素前一個(gè)，方法跟其他的一致
</script>
</html>
微信掃碼
關(guān)注PHP中文網(wǎng)服務(wù)號(hào)
技術(shù)交流群
QQ掃碼
加入技術(shù)交流群
Copyright 2014-2025 http://ipnx.cn/ All Rights Reserved | php.cn | 湘ICP備2023035733號(hào)