收藏
批改状态：合格
老师批语：
插入到节点内容之后:appendTo()
插入到节点内容之前:prependTo()
插入到节点之后: InsertAfter()
插入到节点之前: InsertBefore()
代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>节点的添加或移动</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>') //创建li
// .addClass('green') //添加样式
// .html('10') //添加文本
// .appendTo('ul') //插入到ul
$('#append') //找到已存在的节点
.addClass('blue') //添加样式
.appendTo('ul') //插入到ul
})
$('button').eq(1).on('click',function(){
// var li = $('<li>') //创建li
// .addClass('green') //添加样式
// .html('1') //添加文本
// .prependTo('ul') //插入到ul
$('#prepend') //找到已存在的节点
.addClass('blue') //添加样式
.prependTo('ul') //插入到ul
})
$('button').eq(2).on('click',function(){
// var li = $('<li>') //创建li
// .addClass('green') //添加样式
// .html('10') //添加文本
// .insertAfter('ul') //插入到ul
var li = $('<li>') //创建li
.addClass('green') //添加样式
.html('10') //添加文本
.insertAfter($('li:eq(4)')) //插入到第五个li的前面
// $('#inserAfter') //找到已存在的节点 id为inserAfter
// .addClass('blue') //添加样式
// .insertAfter($('li:eq(4)')) //插入到第五个li的后面
})
$('button').eq(3).on('click',function(){
// var li = $('<li>') //创建li
// .addClass('green') //添加样式
// .html('10') //添加文本
// .insertAfter('ul') //插入到ul
// var li = $('<li>') //创建li
// .addClass('green') //添加样式
// .html('7') //添加文本
// .insertBefore($('li:eq(4)')) //插入到第五个li的前面
$('#insertBefore') //找到已存在的节点 id为insertBefore
.addClass('blue') //添加样式
.insertBefore($('li:eq(4)')) //插入到第五个li的前面
})
</script>
</html>点击 "运行实例" 按钮查看在线实例
写法简单，比较容易拼错单词，练习的时候可以跟之前学的选择器结合一起写
Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号
