jQuery学习二-添加删除元素

最新推荐文章于 2022-11-10 08:53:59 发布

Mr丶M

最新推荐文章于 2022-11-10 08:53:59 发布

阅读量228

点赞数

分类专栏：前端文章标签： jquery

本文链接：https://blog.csdn.net/qq_34390576/article/details/78242681

版权

前端专栏收录该内容

9 篇文章 0 订阅

订阅专栏

jQuery的添加元素主要有4个方法
1. appened() //在被选中的元素结尾添加（被选中的元素内）
2. prepend() //在被选中的元素开头添加（被选中的元素内）
3. before()//在被选中的元素前添加（被选中的元素外）
4. after()//在被选中的元素后添加（被选中的元素外）
上面的几个方法除了能添加元素外，还能添加html , jQuery , DOM(也就是js)

下面是简单的实现代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>test</title>
    <script src="jquery-3.2.1.min.js"></script>
    <script src="test.js"></script>
    <!--<link type="text/css" rel="stylesheet" href="test.css">-->
</head>
<body>
    <p id="p1">hello world</p>
    <p id="p2">hello world</p>
    <p id="p3">hello world</p>
    <p id="p4">hello world</p>
    <button id="btn1">append</button>
    <button id="btn2">prepend</button>
    <button id="btn3">before</button>
    <button id="btn4">after</button>
    <button onclick="appendText()">添加其它</button>
</body>
</html>

js：

$(document).ready(function () {
    $("#btn1").click(function () {//元素内原文本后添加
        $("#p1").append(" test succeess");
    });
    $("#btn2").click(function () { //元素内原文本前添加
        $("#p2").prepend(" test succeess");
    });
    $("#btn3").click(function () {  //元素前面添加
        $("#p3").before(" test success");
    });
    $("#btn4").click(function () {  //元素后面添加
        $("#p4").after(" test success");
    });
});


function appendText() {
    var text1 = "<p>test success</p>";     //html
    var text2 = $("<P></P>").text("test success");     //jquery
    var text3 = document.createElement("p");      //DOM
    text3.innerHTML="test success";
    $("body").append(text1,text2,text3);
}

通过上面的代码就能实现了简单的元素的添加，上面有添加其它html，jq，dom 只是简单用了append来进行实现，你也可以用其它的三个方法。

既然有了添加，当然也有删除了，删除主要有二个方法分别是remove()和empty()。
它们的区别在于，remove()是删除所有元素，而empty()只是删除被选中元素的子元素，remove()是带被选中的元素都删掉。

下面用代码实现一下。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Del</title>
    <script src="jquery-3.2.1.min.js"></script>
    <script src="del.js"></script>
</head>
<body>
    <div  id="div" style="width: 200px; height: 200px; background-color: blue; border: solid black">
        <p>test</p>
        <p>hello world</p>
        <p>hahahaha</p>
    </div>
    <button id="btn">remove</button>
    <div  id="div1" style="width: 200px; height: 200px; background-color: blue; border: solid black">
        <p>test</p>
        <p>hello world</p>
        <p>hahahaha</p>
    </div>
    <button id="btn1">empty</button>
</body>
</html>

$(document).ready(function () {
    $("#btn").click(function () {
        $("#div").remove();//删除全部
    });
    $("#btn1").click(function () {
        $("#div1").empty();//删除子元素
    });
});

Mr丶M

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
jQuery学习二-添加删除元素

jQuery的添加元素主要有4个方法 1. appened() //在被选中的元素结尾添加（被选中的元素内） 2. prepend() //在被选中的元素开头添加（被选中的元素内） 3. before()//在被选中的元素前添加（被选中的元素外） 4. after()//在被选中的元素后添加（被选中的元素外）
复制链接

扫一扫