当前位置 博文首页 > 文章内容
最大化 缩小

    使用jQuery添加DOM元素和删除DOM元素的操作

    作者：zyd1113wz 栏目：前端 时间：2021-01-12 14:09:11

    本站于2023年9月4日。收到“大连君*****咨询有限公司”通知
    说我们IIS7站长博客，有一篇博文用了他们的图片。
    要求我们给他们一张图片6000元。要不然法院告我们

    为避免不必要的麻烦，IIS7站长博客，全站内容图片下架、并积极应诉
    博文内容全部不再显示，请需要相关资讯的站长朋友到必应搜索。谢谢！

    另祝：版权碰瓷诈骗团伙，早日弃暗投明。

    相关新闻：借版权之名、行诈骗之实，周某因犯诈骗罪被判处有期徒刑十一年六个月

    叹！百花齐放的时代,渐行渐远!


         添加元素：
         .append()——在目标元素之后添加元素；
         .prepend()——在目标元素之前添加元素；
         .after()——在目标元素之后换行添加元素；
         .before()——在目标元素之前添加元素，并使目标元素换行；
         删除元素：
         .remove()——删除目标元素；
         .empty()——清空目标元素内的子元素；


         <!DOCTYPE html>
         <html>
         <head>
         <meta charset="UTF-8">
         <title>添加元素&删除元素</title>
         <script src="js/jquery-1.11.2.min.js"></script>
         <script src="js/addEle.js"></script>
         <style>
         .divStyle{
         width:300px;
         height:25px;
         background: #01C5FF;
         }
         </style>
         </head>
         <body>
         <button id="btn">添加元素</button>
         <div>
         <p>恒大今年的亚冠之路会顺利吗？</p>
         </div>
         <button id="btn2">删除元素</button>
         </body>
         </html>
         $(document).ready(function(){
         /*添加元素*/
         $("#btn").on("click",function(){
         /**
         *html方法,jQuery方法,Dom方法
         */
         var ele1="<p>come on</p>";
         var ele2=$("<p></p>").text("let's do it");
         var ele3=document.createElement("p");
         ele3.innerHTML="dance your body";
         $("body").append(ele1,ele2,ele3);
         });
         /*删除元素*/
         $("#btn2").on("click",function(){
         //$("div").remove();
         $("div").empty();
         });
         });

         原文链接：https://blog.csdn.net/bboyjoe/article/details/47400135