DOM节点操作-CFANZ编程社区

var 变量 = document.createElement('标签名称');

创建标签节点：

标签对象.appendChild( 标签节点 );

在标签对象的末位新增标签节点 ;

标签对象.insertBefore( 写入节点 , 在谁之前 );

在标签对象中指定的标签之前写入

var 变量 = 标签对象.cloneNode();

只克隆标签对象本身

var 变量 = 标签对象.cloneNode(true);

克隆标签对象本身以及标签对象的内容

    <style>
        p{
            width: 50px;
            height: 25px;
            background-color: blue;
        }
        div{
            width: 50px;
            height: 25px;
            background-color: brown;
        }
        li {
            width: 120px;
            height: 50px;
            background-color: chartreuse;
        }
    </style>
<body>
    <ul>
        <li>大聪明码农徐1</li>
        <li>大聪明码农徐2</li>
        <li>大聪明码农徐3</li>
        <li>大聪明码农徐4</li>
    </ul>
    <script>
        // 获取ul标签
        const oUl = document.querySelector("ul");
        // 获取li标签
        const oLi = oUl.querySelectorAll("li");
        // 创建节点
        var oP = document.createElement("p");
        var oDiv = document.createElement("div");
        // 末位添加节点
        oUl.appendChild(oP);
        // 在oLi[0]前添加节点
        oUl.insertBefore(oDiv,oLi[0]);
        // 克隆节点，不带内容
        var oLi1 = oLi[3].cloneNode();
        // 克隆节点，带内容
        var oLi2 = oLi[3].cloneNode(true);
        // 末位添加节点
        oUl.appendChild(oLi1);
        oUl.appendChild(oLi2);
    </script>
</body>

运行结果：