收藏
批改状态：合格
老师批语：
jquery的DOM操作：
1、插入到节点内容之后:appendTo()
2、插入到节点内容之前:prependTo()
3、插入到节点之后: InsertAfter()
4、插入到节点之前: InsertBefore()
代码：
<!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:lightblue">移动的节点prependto</p>
<p style="background-color:lightblue">移动的节点insertAfter</p>
<p style="background-color:lightblue">移动的节点insertbefore</p>
</body>
</html>
<script type="text/javascript" src="jquery-3.3.1.js"></script>
<script type="text/javascript">
// 1.appendTo()，插入内容到目标元素后面
// 生成节点元素，设置样式，使用appendTo插入<li>的内容后面
$('button').eq(0).on('click',function(){
var li = $('<li>').css('background-color','lightgreen').html('我是appendTo节点')
li.appendTo($('ul'))
})
// 2.prependTo()，移动第一个P内容，插入内容到ul的前面
$('button').eq(1).on('click',function(){
$('p:eq(0)').prependTo($('ul'))
})
// 3.insertAfter(),移动第二个P内容，插入到第2个li的后面
$('button').eq(2).on('click',function(){
$('p:eq(1)').insertAfter($('li:eq(1)'))
})
// 4.insertbefore()，移动第3个P内容，移到第5个li 的前面
$('button').eq(3).on('click',function(){
$('p:eq(2)').insertBefore($('li:eq(4)'))
})
</script>点击 "运行实例" 按钮查看在线实例
Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号
