收藏
批改状态：合格
老师批语：
jquery中插入节点的四种方法
appendTo(): 将符合条件的元素追加至appendTo的参数节点内(形成了子元素)
prependTo(): 将符合条件的元素添加至prependTo的参数节点内的首位(形成了子元素)
insertAfter(): 将符合条件的元素放置在insertAfter的参数节点之后(形成了一个兄弟元素)
insertBefore(): 将符合条件的元素放置在insertBefore的参数节点之前(形成了一个兄弟元素)
注意事项:如果使用eq()索引元素, 则要注意索引会随着位置的变化而变化
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<script src="https://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
<title>jquery DOM操作</title>
</head>
<body>
<div style="border:1px solid skyblue;width:300px;">
<ul style="border:1px solid red;width:200px;">
<li>第一个标签</li>
<li>第二个标签</li>
<li>第三个标签</li>
<li>第四个标签</li>
</ul>
<p>第一段文字</p>
<p>第二段文字</p>
<p>第三段文字</p>
<p>第四段文字</p>
</div>
<button id="btn1">appendTo()</button>
<button id="btn2">prependTo</button>
<button id="btn3">insertAfter()</button>
<button id="btn4">insertBefore()</button>
</body>
<script>
$("#btn1").click(function(){
$("p").eq(0).appendTo($("ul")); //将第一个p追加到ul标签内,成为ul的子元素,显示的位置是第四个标签后面.
});
$("#btn2").click(function(){
$("p").eq(1).prependTo($("ul")); //将第二个p放在ul标签内的第一个位置,成为ul的子元素显示位置是第一个标签之前
});
$("#btn3").click(function(){
$("p").eq(3).insertAfter($("ul"));//将第四个p放在ul的后面,成为ul的兄弟元素;
});
$("#btn4").click(function(){
$("p").eq(2).insertBefore($("ul")); //将第三个p放在ul的前面,成文他的兄弟元素
});
</script>
</html>
Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号
