收藏
批改狀態(tài)：合格
老師批語：
插入到節(jié)點內容之后:appendTo()
插入到節(jié)點內容之前:prependTo()
插入到節(jié)點之后: InsertAfter()
插入到節(jié)點之前: InsertBefore()
代碼：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>節(jié)點的添加或移動</title>
<style type="text/css">
ul {overflow:hidden;}
ul li {float:left;width:50px;height:50px;border-radius:50%;background-color:#f65050;line-height:50px;text-align:center;list-style-type:none;margin:5px;color:#fff;}
.green {width:50px;height:50px;border-radius:50%;background-color:#00a52b;line-height:50px;text-align:center;list-style-type:none;margin:5px;color:#fff;}
.blue {width:50px;height:50px;border-radius:50%;background-color:#0593c1;line-height:50px;text-align:center;list-style-type:none;margin:5px;color:#fff;}
</style>
</head>
<body>
<ul>
<li>2</li>
<li>3</li>
<li>5</li>
<li>6</li>
<li>9</li>
</ul>
<button>appendTo</button>
<button>prependTo</button>
<button>inserAfter</button>
<button>insertBefore</button>
<br><br>
<li id="append">10</li>
<li id="prepend">1</li>
<li id="inserAfter">10</li>
<li id="insertBefore">8</li>
</body>
<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).on('click',function(){
// var li = $('<li>') //創(chuàng)建li
// .addClass('green') //添加樣式
// .html('10') //添加文本
// .appendTo('ul') //插入到ul
$('#append') //找到已存在的節(jié)點
.addClass('blue') //添加樣式
.appendTo('ul') //插入到ul
})
$('button').eq(1).on('click',function(){
// var li = $('<li>') //創(chuàng)建li
// .addClass('green') //添加樣式
// .html('1') //添加文本
// .prependTo('ul') //插入到ul
$('#prepend') //找到已存在的節(jié)點
.addClass('blue') //添加樣式
.prependTo('ul') //插入到ul
})
$('button').eq(2).on('click',function(){
// var li = $('<li>') //創(chuàng)建li
// .addClass('green') //添加樣式
// .html('10') //添加文本
// .insertAfter('ul') //插入到ul
var li = $('<li>') //創(chuàng)建li
.addClass('green') //添加樣式
.html('10') //添加文本
.insertAfter($('li:eq(4)')) //插入到第五個li的前面
// $('#inserAfter') //找到已存在的節(jié)點 id為inserAfter
// .addClass('blue') //添加樣式
// .insertAfter($('li:eq(4)')) //插入到第五個li的后面
})
$('button').eq(3).on('click',function(){
// var li = $('<li>') //創(chuàng)建li
// .addClass('green') //添加樣式
// .html('10') //添加文本
// .insertAfter('ul') //插入到ul
// var li = $('<li>') //創(chuàng)建li
// .addClass('green') //添加樣式
// .html('7') //添加文本
// .insertBefore($('li:eq(4)')) //插入到第五個li的前面
$('#insertBefore') //找到已存在的節(jié)點 id為insertBefore
.addClass('blue') //添加樣式
.insertBefore($('li:eq(4)')) //插入到第五個li的前面
})
</script>
</html>點擊 "運行實例" 按鈕查看在線實例
寫法簡單，比較容易拼錯單詞，練習的時候可以跟之前學的選擇器結合一起寫
Copyright 2014-2025 http://ipnx.cn/ All Rights Reserved | php.cn | 湘ICP備2023035733號
