html代码:

     
     
    
      add
     
     
    
      del
     
     
    
      hello world !!!    
      change
     
     
     

 

新增标签(document.createElement(标签))

// 方式一(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)        }

 

修改/替换 标签(replaceChild(新标签,旧标签))

//修改/替换 标签    function change() {        //找到父标签        var father = document.getElementById('a4');        //找到需要替换的旧标签        var son = father.getElementsByTagName('span')[0];        //创建一个标签        var ne = document.createElement('div');        // 方式一,定义创建标签样式        // ne.innerHTML = '
     
      !!!!! 
     
';        // 方式二,定义创建标签样式        // 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 属性操作

//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);