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

��Դ��http://www.6cu.com

��ߣ�外链发布

��12

2021-03-26 02:08:26

     添加元素：
     .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();
     });
     });