• JavaScript对列表节点的操作:删除指定节点、删除最后一个节点、删除第一个节点、删除所有节点、增加节点


    使用菜鸟的运行环境直接测试:http://www.runoob.com/try/try.php?filename=tryjs_events

    <!DOCTYPE html>
    <html>
    <head>
    <meta charset="utf-8">
    <title>菜鸟教程(runoob.com)</title>
    <script>
    function removeFirstNode(){
    
        var node = document.getElementsByTagName("li");
        document.getElementById("list").removeChild(node[0]);
        
    }    
    function removeLastNode(){
    
        var node = document.getElementsByTagName("li");
        document.getElementById("list").removeChild(node[node.length-1]);
        
    }
    function addChild(){
        var node = document.createElement('li');
        node.setAttribute("onclick", "removeElement(this)"); 
        var content = document.getElementById('content').value;
        var textnode = document.createTextNode(content);
        node.appendChild(textnode)
        document.getElementById('list').appendChild(node);
        
    }
    function clearAll(){
        document.getElementById("list").innerHTML='';
    }    
    function removeElement(_element){
     var _parentElement = _element.parentNode;
     if(_parentElement){
      _parentElement.removeChild(_element);
     }
    }
        
    </script>
    </head>
    <body>
    <input id="content" placeholder="节点内容" value="" />
    <button type="button" onclick="removeFirstNode()">删除第一个节点</button>
    <button type="button" onclick="removeLastNode()">删除最后一个节点</button>
    <button type="button" onclick="addChild()">增加节点</button>
    <button type="button" onclick="clearAll()">清除节点</button>    
        
    <ul id="list"> 
    
        <li onclick="removeElement(this)">Pretty row 1  </li> 
    
        <li onclick="removeElement(this)">Pretty row 2  </li> 
    </ul> 
    
    </body>
    </html>
  • 相关阅读:
    异常详细信息: System.Data.SqlClient.SqlException:过程或函数 需要参数 但未提供该参数。
    silverlight error message,ErrorCode:2254 ErrorCode: 1001
    每日英语 词汇
    每日词汇
    电子商务网站用户体验根据用户的习惯进行推荐
    刚做项目的时候
    silverlight 不可
    在Centos6上安装RabbitMQ的过程(有点坑)
    SpringBoot整合Redis
    在IDEA中创建工程并将工程添加至Git
  • 原文地址:https://www.cnblogs.com/shengulong/p/8980297.html
Copyright © 2020-2023  润新知