web前端练习26----Dom2,节点的 创建添加，删除，替换，克隆，innerHTML，innerText，显示隐藏及练习

下面以这个 html 作为例子 操作：

    <!--节点的 创建添加，删除，替换，克隆 -->
    <div>这是几个人</div>
    <ul id="peopleUl" name='ulName'>
        <li id="lip1" type="text">刘备</li>
        <li>关羽</li>
        <li>张飞</li>
    </ul>
    <div>这是几个动物</div>
    <ul id="animalUl">
        <li id="liA1">猪</li>
        <li>狗</li>
        <li>牛</li>
    </ul>
    <button id="buttonAdd">添加子节点</button></br>
    <button id="buttonChaRu">插入子节点</button></br>
    <button id="buttonDel">删除子节点</button></br>
    <button id="buttonTiHuan">替换子节点</button></br>
    <button id="buttonKeLong">克隆节点</button></br>
    <button id="buttonInnerHTML">innerHTML</button></br>
    <button id="buttonInnerText">innerText</button></br>

一、添加子节点：

1、添加子节点

创建并添加子节点,是添加到末尾

创建节点

let liNode = document.createElement('li');

添加子节点

ulNode.appendChild(liNode);

        {

            let buttonAdd = document.getElementById('buttonAdd');
            buttonAdd.onclick = function () {
                // 创建一个li节点，并添加文本和属性
                let liNode = document.createElement('li');
                liNode.innerText = '创建的新节点';
                liNode.type = 'zhh';

                let peopleUl = document.getElementById('peopleUl');
                peopleUl.appendChild(liNode);
            }
        }

2、插入子节点

把给定节点插到子节点的前面

除了插入之外，还有移动功能

把 zhu 插到 liubei 前面

peopleUl.insertBefore(zhu, liubei);

        {
            let buttonChaRu = document.getElementById('buttonChaRu');
            buttonChaRu.onclick = function () {
                // 拿到ul节点
                let peopleUl = document.getElementById('peopleUl');
                // 拿到刘备节点
                let liubei = peopleUl.getElementsByTagName('li')[0];

                // 拿到 猪 的节点
                let zhu = document.getElementById('liA1');
                // 把 zhu 插到 liubei 前面
                peopleUl.insertBefore(zhu, liubei);
            }

        }

二、删除子节点

ulNode.removeChild(bjNode);

        {
            let buttonDel = document.getElementById('buttonDel');
            buttonDel.onclick = function () {

                // 拿到刘备节点
                let lbNode = document.getElementById('lip1');
                // 拿到刘备节点的父节点
                let ulNode = lbNode.parentElement;
                // 删除子节点
                ulNode.removeChild(lbNode);
            }
        }

三、替换子节点

replaceChild 把父元素里面的子节点替换为另外一个节点

        {
            
            let buttonTiHuan = document.getElementById('buttonTiHuan');
            buttonTiHuan.onclick = function () {

                let zhu = document.getElementById('liA1');
                // 替换
                // 拿到被替换的节点
                let liubei = document.getElementById('lip1');
                // 拿到父节点,把刘备替换成猪
                let liubeiParent = liubei.parentElement;
                liubeiParent.replaceChild(zhu, liubei);
            }
        }

四、克隆节点

Node.cloneNode(true) 方法返回调用该方法的节点的一个副本.

点击事件克隆不了，要手动赋值

        {
            let buttonKeLong = document.getElementById('buttonKeLong');
            buttonKeLong.onclick = function () {
                let li = document.getElementById('lip1');
                let cloneLi = li.cloneNode(true);
                console.log(cloneLi);
            }

        }

五、innerHTML 和 innerText

对象.innerHTML拿到里面的子标签，是一个字符串类型。可以查找，修改，增加，删除

对象.innerText 拿到标签里面的文本，是一个字符串类型。可以查找，可以修改

        {
            let buttonInnerHTML = document.getElementById('buttonInnerHTML');
            buttonInnerHTML.onclick = function() {
                // 对象.innerHTML拿到里面的子标签，是一个字符串类型
                // 可以查找，可以修改

                let people = document.getElementById('peopleUl');
                // 查找标签