DOM的增、删、改、查、克隆、替换_同一文档实现元素的增加,删除,修改,替换-CSDN博客

本文链接：https://blog.csdn.net/congboer/article/details/96450223

DOM的增、删、改、查、克隆、替换

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>

<body>
    <div class="box">
        <ul>
            <li>11111</li>
            <li>11111</li>
            <li>11111</li>
            <li>11111</li>
            <li>11111</li>
        </ul>
        <ol>
            <li>222222</li>
            <li>222222</li>
            <li>222222</li>
            <li>222222</li>
            <li>222222</li>
        </ol>
    </div>
    <script>
        //1.创建元素--createElement(元素名)
        //var cDiv=document.createElement('div');
        //cDiv:创建的div元素对象
        //添加内容
        //cDiv.innerHTML='我是创建出来的';
        //添加css样式
        //cDiv.style.background='red';
        //alert(cDiv);//[object HTMLDivElement]

        //2.追加元素--appendChild(追加的元素)追加子元素。追加到父元素内部的后面。
        //document.body.appendChild(cDiv);

        //3.删除子元素元素--removeChild(删除的元素)
        //var oBox=document.querySelector('.box');
        //document.body.removeChild(oBox);

        //4.克隆元素,复制元素--cloneNode(true):参数为true，包括内容和子元素。
        //var oDiv=document.querySelector('div');
        //document.body.appendChild( oDiv.cloneNode(true) );

        //5.替换元素--replaceChild(新添加的元素 , 被替换的元素)替换元素
        //创建p标签
        // var cP=document.createElement('p');//新加

        // var oBox=document.querySelector('.box');//被替换
        // cP.innerHTML=oBox.innerHTML;

        // document.body.replaceChild(cP,oBox);

        //6.insertBefore(新的元素, 存在的元素);

        var cP1=document.createElement('p');
        cP1.innerHTML='前面的p标签';

        var cP2=document.createElement('p');
        cP2.innerHTML='后面的p标签';

        var oBox=document.querySelector('.box');

        document.body.appendChild(cP2);

        document.body.insertBefore(cP1, oBox);

    </script>
</body>

</html>