dom树元素的增删改查

<script>
        //创建dom元素
        let div = document.createElement("div");
        let span = document.createElement("span");
        // console.log(div,span);
        span.textContent = "hello";
        // append(lel,'text')，将参数作为父元素的最后一个子元素追加到列表中，无返回值
        // span 添加到div中
        div.append(span);
        div.append(span,"world");
        console.log(div);
        // document.body.append(div);
        // document.body.append(span,"world");
        //为什么div中的span消失了？
        //新元素span只能插入到一个地方
        //span在 div，现在span在body中，相当于剪切操作
        //如果想保留span在div中，需要克隆span
        // true：是完整的保留元素内部结构
        document.body.append(span.cloneNode(true),"world");
        // append()创建一个列表
        const ul = document.createElement("ul");
        //循环生成列表项li
        for (let i = 1;i <= 5 ; i++){
            let li = document.createElement("li");
            li.textContent = `item${i}`;
            // li.style.color = "red";
            ul.append(li);
        }
        document.body.append(ul);
        //和append()尾部追加，对应的；prepend() 在头部追加
        li = document.createElement("li");
        li.textContent = 'first item';
        li.style.color = "red";
        ul.prepend(li);
        //如果是在除了头部和尾部之外的地方添加
        //必需要有一个参考节点
        //以第四个节点为参考
        const referNode = document.querySelector("li:nth-of-type(4)");
        referNode.style.background = "cyan";
        //在它之前添加一个新节点
        li = document.createElement("li");
        li.textContent = "在参考节点之前插入";
        li.style.background = "yellow";
        //referNode.before(el)，在插入节点上调用
        referNode.before(li);
        li = document.createElement("li");
        li.textContent = "在参考节点之后插入";
        li.style.background = "violet";
        //referNode.after(el)，在插入节点上调用
        referNode.after(li);
        //替换节点
        //将最后一个节点用链接替换
        let lastItem = document.querySelector("ul li:last-of-type");
        let a = document.createElement("a");
        a.textContent = "替换网址";
        a.href = "https://baidu.com";
        lastItem.replaceWith(a);
        //删除节点，在被删除的节点上直接调用 remove（无参数）
        ul.querySelector(':nth-of-type(6)').remove();
    </script>