<!--添加/删除/修改 -->

<div id="a1">

    <button id="a2" onclick="add()">add</button>

</div>

<div id="a3">

    <button onclick="del()">del</button>

</div>

<div id="a4" style="margin-top: 20px">

    <span style="width: 20px;height: 20px">hello world !!!</span>

    <button onclick="change()">change</button>

</div>

<!--classname属性操作-->

<div id="cn" class="a11 b11 c11">

</div>

 // 方式一(butter控件中添加事件)

    function add() {

        var a = document.createElement("span");

        a.innerText='this span label!';

        var father = document.getElementById('a1')

        father.appendChild(a)

    }

    // 方式二(直接document获取标签)

    // // 通过的标签,定义事件(只执行一次函数)

    // var s1 = document.getElementById('a2');

    // var father = s1.parentNode;

    //

    // var a = document.createElement("span");

    // a.innerText='this span label!';

    //

    // s1.onclick = function f() {

    //     father.appendChild(a);

    // };

//删除标签

        function del() {

            var father = document.getElementById('a1');

            var son = father.getElementsByTagName('span')[0];

            father.removeChild(son)

        }

//修改/替换 标签

    function change() {

        //找到父标签

        var father = document.getElementById('a4');

        //找到需要替换的旧标签

        var son = father.getElementsByTagName('span')[0];

        //创建一个标签

        var ne = document.createElement('div');

        // 方式一,定义创建标签样式

        // ne.innerHTML = '<div style="background-color: blue;width: 200px;height: 200px">!!!!! </div>';

        // 方式二,定义创建标签样式

        // ne.style.backgroundColor = 'red';

        // ne.style.width = '200px';

        // ne.style.height = '200px';

        // ne.innerText = "this is new div !!!! "

        //方式三,通过setattribute 设置标签样式.

            ne.setAttribute('style',"background-color:red;width: 200px;height: 200px");

            //这种方式也可以获取到对象的属性值

            var ne2 = ne.getAttribute('style');

            console.log(ne2)

            //输出为:background-color:red;width: 200px;height: 200px

        //通过父标签 替换新旧标签

        father.replaceChild(ne,son)

    }

//classname属性操作

        var classmame = document.getElementById('cn')

        //返回classname

        console.log(classmame.className);

        //class列表

        console.log(classmame.classList);

        console.log(classmame.classList[0]);

        console.log(classmame.classList[1]);

        console.log(classmame.classList[2]);

        //增加classname

        classmame.classList.add("d11");

        console.log(classmame.className);

        //移除classname

        classmame.classList.remove("d11");

        console.log(classmame.className);