收藏
批改状态：合格
老师批语：
用JQ增加节点：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>4.将节点添加或移动到目标节点</title>
<style type="text/css">
li {
background-color: lightskyblue;
width: 300px;
margin-bottom: 5px;
}
</style>
</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: orange;width: 300px;">我是要被appendTo()移动的节点1</li>
<p style="background-color: orange;width: 300px;">我是要被prependTo()移动的节点2</li>
<p style="background-color: orange;width: 300px;">我是要被insertAfter()移动的节点3</li>
<p style="background-color: orange;width: 300px;">我是要被insertBefore()()移动的节点4</li>
</body>
</html>
<script type="text/javascript" src="../js/jquery-3.3.1.js"></script>
<script type="text/javascript">
$('button').eq(0).on('click',function(){
var li = $('<li>').css('background-color','lightgreen').html('我是appendTo()新生成的节点1')
//第二点: 将新节点插入到目标节点内容的后面
li.appendTo($('ul'))
//2.移动操作(请将添加操作的代码注释掉)
// $('p:first').appendTo($('ul'))
})
///////////////////////////////////////////////////////////////
$('button').eq(1).on('click',function(){
$('p:eq(1)').prependTo($('ul'))
})
///////////////////////////////////////////////////////////////
$('button').eq(2).on('click',function(){
var p = $('<li>').css('background-color','lightgreen').html('我是insertAfter()新生成的节点3')
//第二点: 将新节点插入到目标节点的后面
p.insertAfter($('ul'))
})
///////////////////////////////////////////////////////////////
$('button').eq(3).on('click',function(){
var p = $('<li>').css('background-color','lightgreen').html('我是insertBefore()新生成的节点4')
$('p:eq(3)').insertBefore($('li:eq(2)'))
})
</script>点击 "运行实例" 按钮查看在线实例
Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号
