一、classList

  • classList对象有下列方法。

add()：增加一个 class。
remove()：移除一个 class。
contains()：检查当前元素是否包含某个 class。
toggle()：将某个 class 移入或移出当前元素。
item()：返回指定索引位置的 class。

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

jquery-class

  • addClass
  • removeClass 清除
  • toggleClass

  • hosClass

    <script src="lib/jquery-3.4.1.js"></script>
<style>
.current{
   background: red;
}
</style>
</head>
<body>
<p>hello world</p>
<button id="add">addClass</button>
<button id="remove">removeClass</button>
<button id="toggle">toggleClass</button>
<button id="delete">remove</button>
<script>
/* 

*/
$("#add").click(function(){
   $("p").addClass("current")
})
$("#remove").click(function(){
   $("p").removeClass("current")
})
$("#toggle").click(function(){
   if($("p").hasClass("current")){
       $("p").removeClass("current")
   }else{
       $("p").addClass("current")
   }
})
$("#delete").click(function(){
   $("p").remove()
})
</script>

    二、ParentNode.append()，ParentNode.prepend()

  • prepend()在父元素的第一位增加元素

  • append()在父元素的最后一位增加元素
<div id="parent">
        <p>hello world</p>
    </div>
    <script>
        var parent = document.getElementById("parent");
        var h1 = document.createElement("h1");
        h1.innerHTML = "前面";
        parent.prepend(h1);
        parent.append("后面");
    </script>

jquery添加

<script src="lib/jquery-3.4.1.js"></script>
</head>
<body>
    <script>
        $("body").prepend("<h1>前面</h1>");
        $("body").append("<h1>后面</h1>");
    </script>

三、childNode接口

  • before-在元素之前插入,可以传多个值
  • after
    <p id="p">hello world</p>
  <script>
      var p = document.getElementById("p");
      p.before("前面")
      p.after("后面")
  </script>