JQuery DOM元素的删除和添加

来源：互联网发布：lv羊绒围巾知乎编辑：程序博客网时间：2024/04/28 21:12

元素的添加

（1）append()：在元素的最后面添加内容
（2）prepend()：在元素的最前面添加内容

<div id="div1"></div><button id="btnAtn">点击从前面添加</button><button id="btnApp">点击从后面添加</button></body>$("#btnApp").click(function(){    $("#div1").append("<p>这是在后面添加的段落</p>");});$("#btnAtn").click(function(){    $("#div1").prepend("<p>这是在前面添加的段落</p>");});

这两个都可以同时添加多个内容，这些内容可以使通过HTML、JQuery、DOM创建的

<body><div id="div1">    <hr/> //加个分界线使结果看的更清晰</div><button id="btnApp">点击1</button><button id="btnPre">点击2</button></body><script>    $("#btnApp").click(function(){        var txt1 = "<p>姓名：</p>";        var txt2 = $("<p></p>").text("电话：");        var txt3 = document.createElement("p");        txt3.innerText = "住址";        $("#div1").append(txt1,txt2,txt3);    });    $("#btnPre").click(function(){    var txt1 = "<p>个人信息：</p>";    var txt2 = $("<p></p>").text("e-mail：");    var txt3 = document.createElement("p");    txt3.innerText = "个人住址";    $("#div1").prepend(txt1,txt2,txt3);    });</script>

（3）after()和brfore()：
两组添加的区别：append()和prepend()添加后成为了其子元素
after()和brfore()添加后成为了其兄弟元素

var txtAfter = "<p>这是通过after添加的</p>";$("#div1").after(txtAfter);

元素的删除

remove()：删除的是被选元素及其子元素，它还有过滤删除的作用，可以删除指定元素，它的参数指定元素的名字
enpty()：删除的是子元素

<style>        div{            width: 500px;            height: 200px;            background-color: plum;        }    </style></head><body>    <div id="div1">        <p>我是div1的内容1</p>        <p class="p2">我是div1的内容2</p>        <p>我是div1的内容3</p>        <p class="p2">我是div1的内容4</p>    </div>    <div id="div2">        <p>我是div2的内容</p>    </div>    <button id="delDiv1">删除div1</button>    <button id="delDiv2">删除div2</button></body><script>    $("#delDiv1").click(function(){        $("p").remove(".p2");//删除的是所有p标签中class名为“p2”的元素    });    $("#delDiv2").click(function(){        $("#div2").empty();    });</script>

阅读全文

0 0