1.js实现

add() //添加指定的类

remove() //删除指定的类

toggle() //集成了添加和删除 如果该类存在，则删除；如果不存在则添加

contains() //检查元素class属性中是否存在指定的类

实现效果
捕获.PNG
点击addClass,点击removeClass移除背景
捕获.PNG

  1.     <style>
  2.         .active{
  3.             background: red;
  4.         }
  5.     </style>
  6. <body>
  7.     <p id="p">hello world</p>
  8.     <button id="btn">addClass</button>
  9.     <button id="removeClass">removeClass</button>
  10.     <button id="toggle">toggleClass</button>
  11.     <button id="remove">remove</button>
  13.     <script>
  14.         var btn = document.getElementById("btn");
  15.         var p = document.getElementById("p");
  16.         var remove = document.getElementById("removeClass");
  17.         var toggle = document.getElementById("toggle");
  18.         var removeElement = document.getElementById("remove");
  19.         btn.onclick = function(){
  20.             p.classList.add("active")
  21.         }
  22.         remove.onclick = function(){
  23.             p.classList.remove("active")
  24.         }
  25.         toggle.onclick = function(){
  26.             p.classList.toggle("active")
  27.         }
  28.         removeElement.onclick = function(){
  29.             p.remove()   //移除p标签
  30.         }
  31.     </script>
  32. </body>

2.jquery实现

addClass() //添加指定的类

removeClass() //删除指定的类

toggleClass() //集成了添加和删除 如果该类存在，则删除；如果不存在则添加

hasClass() //检查元素class属性中是否存在指定的类

  1.     <style>
  2.         .current{
  3.             background: red;
  4.         }
  5.     </style>
  6. <body>
  7.     <p>hello world</p>
  8.     <button id="add">addClass</button>
  9.     <button id="remove">removeClass</button>
  10.     <button id="toggle">toggleClass</button>
  11.     <button id="delete">delete</button>
  13.     <script>
  14.         $("#add").click(function(){
  15.             $("p").addClass("current")
  16.         })
  17.         $("#remove").click(function(){
  18.             $("p").removeClass("current")
  19.         })
  20.         $("#toggle").click(function(){
  21.             // $("p").toggleClass("current")  //简洁实现
  22.             if($("p").hasClass("current")){
  23.                 $("p").removeClass("current")
  24.             }else{
  25.                 $("p").addClass("current")
  26.             }                                 //内部封装
  27.         })
  28.         $("#delete").click(function(){
  29.             $("p").remove()
  30.         })
  31.     </script>
  32. </body>

3.添加

js添加

  1. <body>
  2.     <div id="parent">
  3.         <p>hello world</p>
  4.     </div>
  5.     <script>
  6.         /* 
  7.         prepend()在父元素的第一位增加元素
  8.         append()在父元素的最后一位增加元素
  9.          */
  10.         var parent = document.getElementById("parent");
  11.         var h1 = document.createElement("h1");
  12.         h1.innerHTML = '前面'
  13.         parent.prepend(h1)
  14.         parent.append("后面")
  15.     </script>
  16. </body>

image.png

jquery添加(内部插入，相当于子节点)

  1.     <script>
  2.         $("body").prepend("<h1>前面</h1>")
  3.         $("body").append("<h1>后面</h1>")
  4.         $("<h1>前面</h1>").prependTo("body")
  5.         $("<h1>后面</h1>").appendTo("body")
  6.     </script>

image.png

before-after(外部插入，相当于兄弟节点)

  1. <body>
  2.     <p id="p">hello world</p>
  3.     <script>
  4.         var p = document.getElementById("p");
  5.         p.before("前面")
  6.         p.after("后面")
  7.         $('<p>前兄弟</p>').insertBefore('#p')
  8.         $('<p>后兄弟</p>').insertAfter('#p')
  9.     </script>
  10. </body>

image.png