jQuery 添加和移除元素

最新推荐文章于 2024-07-17 18:42:40 发布

事业有程

最新推荐文章于 2024-07-17 18:42:40 发布

阅读量364

点赞数

文章标签： servlet html 前端

本文链接：https://blog.csdn.net/weixin_71439860/article/details/126310711

版权

示例代码：

<!DOCTYPE html>

<html lang="en">

<head>

<meta charset="UTF-8">

<meta http-equiv="X-UA-Compatible" content="IE=edge">

<meta name="viewport" content="width=device-width, initial-scale=1.0">

<title>Document</title>

<script src="../js/jquery-3.6.0.min.js"></script>

<style>

ul {

list-style: none;

}

</style>

</head>

<body>

<button id="btn1">append添加</button>

<button id="btn2">appendTo添加</button>

<button id="btn3">prepend添加</button>

<button id="btn4">prependTo添加</button>

<button id="btn5">before添加</button>

<button id="btn6">after添加</button>

<button id="btn7">remove移除</button>

<button id="btn8">empty移除</button>

<ul>

<li>香蕉</li>

<li class="aa">苹果</li>

<li>香蕉</li>

</ul>

</body>

<script>

$(function() {

$("#btn1").click(function() {

// append 给某个元素添加子元素，位置:子元素后面添加

$("ul").append("<li>哈密瓜</li>")

})

$("#btn2").click(function() {

// appendTo 将某个元素添加到目标中位置:子元素后面添加

$("<li>梨</li>").appendTo("ul")

})

$("#btn3").click(function() {

// prepend 给某个元素添加子元素，位置:子元素前面添加

$("ul").prepend("<li>哈密瓜</li>")

})

$("#btn4").click(function() {

// prependTo 将某个元素添加到目标中位置:子元素前面添加

$("<li>梨</li>").prependTo("ul")

})

$("#btn5").click(function() {

//before给某个元素前面添加兄弟标签

$("ul").before("<h2>哈密瓜</h2>")

})

$("#btn6").click(function() {

//before给某个元素后面添加兄弟标签

$("ul").after("<h2>哈密瓜</h2>")

})

$("#btn7").click(function() {

//remove删除某个元素包括本身

$("ul").remove()

})

$("#btn8").click(function() {

//empty删除某个元素不包括本身

$("ul").empty()

})

})

</script>

</html>