JavaScript-DOM增、删、改节点_js调换节点顺序-CSDN博客

JavaScript-DOM增、删、改节点

要增加节点，那就得先了解元素节点及文本节点这两种常用节点如何创建。首先，如何创建一个元素节点？DOM给我们提供了相应的方法：document.createElement(“tagname”)，该方法能够根据参数指定的标签名称创建一个新的元素，并返回新建元素的引用。那如何创建一个文本节点呢？当然DOM也给我们提供了document.createTextNode(data)方法。
令人头秃的是创建了相应的节点后新的节点信息并不能被添加到文档中？？？哈哈，那是因为新的节点并没有nodeParent属性，仅在JavaScript上下文中有效，所以要把这个新节点添加到文档中我们就需要使用appendChild()、replaceChild()或insertBefore()方法实现。
除此之外，若要复制一个节点信息，可以试一试cloneNode()方法，当需要删除一个节点时可以用removeChild()方法删除相应节点。

亲自试一试

这是一个非常详细的小例子，上面所提到的方法都有运用到，而且还有详细注释帮助更好理解！

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <title>DOM-增删改节点示例</title>
    <script>
        window.onload = function () {
            let btn1 = document.getElementsByTagName("button")[0];
            let btn2 = document.getElementsByTagName("button")[1];
            let btn3 = document.getElementsByTagName("button")[2];
            let btn4 = document.getElementsByTagName("button")[3];
            let alllist = document.getElementById("alllist");
            // 列表末尾新增节点
            btn1.onclick = function () {
                // createElement():创建元素节点
                let lastline = document.createElement("li");
                // createTextNode():创建文本节点
                let wordsadd = document.createTextNode("听懂我们的言语");
                // 把文本节点添加到li中
                lastline.appendChild(wordsadd);
                // cloneNode(deep)复制节点:该方法将复制并返回调用它的节点的副本。
                // deep为true，它还将递归复制当前节点的所有子孙节点。否则，它只复制当前节点。
                let cloneline = lastline.cloneNode(true);
                
                // appendChild(newchild)添加节点：向当前节点的子节点列表的末尾添加新的子节点，返回新增节点
                alllist.appendChild(cloneline);
            }
            // 插入节点
            btn2.onclick = function () {
                // 插入对照节点
                let line6 = document.getElementById('line6');
                let line5 = document.createElement("li");
                let wordsinsert = document.createTextNode("叶，相触在云里");
                let wordsline5 = line5.appendChild(wordsinsert);
                 // insertBefore(newchild,refchild)插入节点:newchild表示新插入节点，
                // refchild表示在此节点前插入newchild，返回新的子节点
                alllist.insertBefore(wordsline5, line6);
            }
            // 替换节点
            btn3.onclick = function () {
                let line7 = document.getElementById('line7');
                let wordsrep = document.createTextNode("我们都相互致意");
                // replaceChild(newnode, oldnode)替换节点：替换成功返回被替换节点，失败返回null
                line7.replaceChild(wordsrep, line7.childNodes[0]);
            }
            // 删除节点
            btn4.onclick = function () {
                let line1 = document.getElementsByTagName('li')[0];
                // removeChild(node)删除节点：从子节点列表中删除某个节点
                alllist.removeChild(line1);
            }
        }
    </script>
    <style>
        ul {
            list-style: none;
        }
    </style>
</head>

<body>
    <div>
        <ul id="alllist">
            <li>致橡树</li>
            <li>我必须是你近旁的一株木棉</li>
            <li>作为树的形象和你站在一起</li>
            <li>根，紧握在地下</li>
            <li id="line6">每一阵风吹过</li>
            <li id="line7">XXXXX</li>
            <li>但是没有人</li>
        </ul>
        <button onclick="addse()">新增</button>
        <button>插入</button>
        <button>替换</button>
        <button>删除</button>
    </div>
    <script>
        // 文档是自上而下解析的，如果直接用事件里的函数名，则最好定义到</body>前
        // function addse() {
        //};
    </script>
</body>

</html>```