js中的节点操作js节点操作包括添加、删除、克隆等等，在js中动态创建一个标签，给动态创建的元素添加内容、添加类名都是比

<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .box{
            color:red;
        }
    </style>
</head>
<body>
    <ul>
        <li class="box" id="li1">
            <span>第一项</span>
        </li>
        <li class="box">
            <span>第二项</span>
        </li>
        <li class="box">
            <span>第三项</span>
        </li>
    </ul>
    <button id="bt1">增加</button>
    <button id="bt2">克隆</button>
    <button id="bt3">删除</button>
    <script>
        var bt1=document.getElementsByTagName("button")[0];
        var nav=document.getElementsByTagName("ul")[0];
        var bt2=document.getElementById("bt2");
        var bt3=document.getElementById("bt3");
        bt1.onclick=function(){
            // // js动态创建标签节点
            // 在js中动态创建了一个li标签
            var li=document.createElement("li");
            // 向动态创建元素中添加内容
            li.innerHTML="第四项";
            // 给动态的元素添加类名
            li.className="box";
            // 将动态创建的li插入到ul的最后方
            nav.appendChild(li);
        }

        bt2.onclick=function(){
            var li1=document.getElementById("li1");
            // 克隆
            // 通过是否传入ture控制是否需要复制里面的内容，如果没有true内容不复制,如果有true，复制其内容
            var createLi=li1.cloneNode(true);
            nav.appendChild(createLi);
        }
        var navLis=nav.getElementsByTagName("li");
        for(var n=0;n<navLis.length;n++){
            navLis[n].onclick=function(){
                // .parentNode找到对应元素的父级元素
                this.parentNode.style.backgroundColor="blue";
            }
        }

        bt3.onclick=function(){
            // 先找到要删除的元素
            var firstLi=document.getElementsByTagName("li")[0];
            // 找到被删除元素的父级
            var nav=document.getElementsByTagName("ul")[0];
            // 将这个元素再其父级中删除
            nav.removeChild(firstLi);
        }

        for(var n=0;n<navLis.length;n++){
            navLis[n].onclick=function(){
                // this就是当前对象
                // this.parentNode就是当前元素的父级
                var par=this.parentNode;
                // 直接在父级中把当前元素删除
                par.removeChild(this);
            }
        }


    </script>
</body>
</html>