收藏
批改状态：合格
老师批语：
代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<ul>
<li>列表项1</li>
<li>列表项2</li>
<li>列表项3</li>
<li>列表项4</li>
<li>列表项5</li>
</ul>
<button>appendto</button>
<button>prependto</button>
<button>insertafter</button>
<button>insertbefore</button>
<p style="background-color:skyblue;width: 250px; ">我被appendto移动的节点1</p>
<p style="background-color:skyblue;width: 250px; ">我被prependto移动的节点2</p>
<p style="background-color:skyblue;width: 250px; ">我被insertafter移动的节点3</p>
<p style="background-color:skyblue;width: 250px; ">我被insertbefore移动的节点4</p>
</body>
</html>
<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>').css('background-color','skyblue').html('我是appendto新生成的节点1')
//新生成节点插入到目标元素内容的后面
li.appendTo($('ul'))
// 移动节点1到ul内容后面
// $('p:first').appendTo($('ul'))
})
$('button').eq(1).on('click',function(){
var li = $('<li>').css('background-color','skyblue').html('我是prependTo新生成的节点2')
// 新增节点插入到目标元素内容的前面
// li.prependTo($('ul'))
// 移动节点2到ul内容的前面
$('p:eq(1)').prependTo($('ul'))
})
$('button').eq(2).on('click',function(){
var p = $('<li>').css('background-color','skyblue').html('我是insertafter新生成的节点3')
// 将新建节点3插入到ul节点之后
// p.insertAfter($('ul'))
// 移动p节点3到ul节点的后面 平级
$('p:eq(2)').insertAfter($('ul'))
})
$('button').eq(3).on('click',function(){
var p = $('<li>').css('background-color','skyblue').html('我是insertBefore新生成的节点4')
// 将新建节点4插入到ul节点之前平级
// p.insertAfter($('ul'))
// 移动p节点4到ul节点的前面 平级
$('p:eq(3)').insertBefore($('ul'))
})
</script>点击 "运行实例" 按钮查看在线实例
Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号
