节点的 添加 替换 删除

 

 

 

 

 

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
     #city li {
       list-style: none;
       display: inline-block;
       width: 50px;
       height: 30px;
       line-height: 30px;
       text-align: center;
       background-color: yellowgreen;
     }
  </style>
  <script>
  
    window.onload = function(){
      // 1 创建一个"广州"节点 添加到#city下
      myClick("btn01",function(){
        // 创建一个"广州"节点  创建 li 元素节点   创建 广州文本节点  
        // document.createElement() 创建元素节点
        var li = document.createElement('li'); 
        // document.createTextNode() 创建文本节点 
        var gzText = document.createTextNode("广州") 
        // 将 gzText 设置到 li 的子节点
        //* appendChild() 向一个父节点中添加一个新的子节点 
        li.appendChild(gzText)
          // 添加到#city下
        var city = document.getElementById("city")
        city.appendChild(li)
      })


      // 2 将"广州"节点插入到#bj前面
      myClick("btn02",function(){
        // document.createElement() 创建元素节点
        var li = document.createElement('li'); 
        // document.createTextNode() 创建文本节点 
        var gzText = document.createTextNode("广州");
        //* appendChild() 向一个父节点中添加一个新的子节点 
        li.appendChild(gzText)

        var bj = document.getElementById("bj")

        var city = document.getElementById("city")

        /**
         * insertBefore()
         *  可以在指定的子节点前插入 新的子节点
         *  语法: 
         *   父节点.insertBefore(新节点,旧节点)
        */
        city.insertBefore(li,bj); 

      })
 
      // 3 使用"广州"节点替换#bj节点
      myClick("btn03",function(){
        // document.createElement() 创建元素节点
        var li = document.createElement('li'); 
        // document.createTextNode() 创建文本节点 
        var gzText = document.createTextNode("广州");
        //* appendChild() 向一个父节点中添加一个新的子节点 
        li.appendChild(gzText)

        var bj = document.getElementById("bj")
        var city = document.getElementById("city") 
        /**
         * replaceChild()
         *  可以使用 指定的子节点 替换 已有的子节点
         *  语法: 
         *   父节点.replaceChild(新节点,旧节点)
        */
        city.replaceChild(li,bj); 

      })

      // 4 删除#bj节点
      myClick("btn04",function(){
        var bj = document.getElementById("bj")
        var city = document.getElementById("city") 
        /**
         * removeChild()
         *  可以删除一个子节点
         *  语法: 
         *   父节点.removeChild(子节点)
         * 
         * 子节点.parentNode.removeChild(子节点)
        */
        // city.removeChild(bj); 
 
        bj.parentNode.removeChild(bj)

      })
      // 5 读取#city内的HTML代码
      myClick("btn05",function(){
        var city = document.getElementById("city") 
        console.log(city.innerHTML);
      })

      // 6 设置#bj内的HTML代码
      myClick("btn06",function(){
        var bj = document.getElementById("bj") 
        console.log(bj.innerHTML = '昌平');
      })


      myClick("btn07",function(){
        var city = document.getElementById("city") 

        /**
         *  使用 innerHTML 也可以完成DOM 的增删改 的操作
         *  一般 会 两种方式结合使用
        */
        // console.log(city.innerHTML += '<li>广州</li>');  
       // document.createElement() 创建元素节点
       var li = document.createElement('li'); 
       li.innerHTML = '广州'
       city.appendChild(li)
         
      })


     function myClick(doc,fun){
       var el = document.getElementById(doc);
       el.onclick = fun
     }
    }

  </script>
 
</head>
<body>

   <div id="total">   
      <div class="inner">    
        
        <p>
           你喜欢哪个城市?
        </p>
        <ul id="city">
            <li id="bj">北京</li>
            <li>上海</li>
            <li>东京</li>
            <li>首尔</li>
        </ul>
      </div>
   </div>
   
    <div id="btnList">
        <div><button id="btn01">创建一个"广州"节点 添加到#city下</button></div>
        <div><button id="btn02">将"广州"节点插入到#bj前面</button></div>
        <div><button id="btn03">使用"广州"节点替换#bj节点</button></div>
        <div><button id="btn04">删除#bj节点</button></div>
        <div><button id="btn05">读取#city内的HTML代码</button></div>
        <div><button id="btn06">设置#bj内的HTML代码</button></div>
        <div><button id="btn07">创建一个"广州"节点 添加到#city下</button></div>
    </div>
</body>
</html>
posted @ 2021-05-05 16:02  13522679763-任国强  阅读(90)  评论(0)    收藏  举报