第二节 增删class和元素

1.classlist

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

<style>
        .active{
            background: red;
        }
</style>

    <p id="p">hello world</p>
    <button id="btn">addClass</button>
    <button  id="remove">removeClass</button>
    <button id="toggle">toggleClass</button>
    <!-- classList
         add()  --添加一个class
         remove()  --移除一个class
         toggle()  --将某个class移出或移入某个对象
         contains()  --检查当前元素是否包含某个class
    -->
    <script>
        var btn=document.getElementById("btn");
        var p=document.getElementById("p");
        var remove=document.getElementById("remove");
        var toggle=document.getElementById("toggle");
        btn.onclick=function(){
            p.classList.add("active")   //添加
        }
        remove.onclick=function(){
            p.classList.remove("active")   //移除
        }
        toggle.onclick=function(){
            p.classList.toggle("active")   //移入/移除
        }
    </script>

2.添加元素：

2.1父元素：parentNode.prepend(),parentNode.append()

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

• append()在父元素的最后一位增加元素

  Tip:可添加多个,元素和文本都可以 ```javascript

  think you

  hello world

输出结果: think you 前面 hello world 后面

<a name="2UDa5"></a>
#### 2.2兄弟元素:before() ,after()
```javascript
<p id="p">hello world</p>
<script>
  var p=document.getElementById("p")
  p.before("前面")
  P.after("后面")
</script>
输出结果：
   前面
   hello world
   后面