zoukankan      html  css  js  c++  java
  • Javascript 笔记与总结(2-10)删除节点,创建节点

    【删除节点】

    步骤:

    ① 找到对象

    ② 找到他的父对象 parentObj

    ③ parentObj.removeChild(子对象);

    【例】

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Document</title>
        <style>
            #div1{
                 300px;
                height: 300px;
                background: blue;
                border-bottom: 1px solid black;
            }
        </style>
        <script>
            function del(){
                var lis = document.getElementsByTagName("li");
                var lastLi = lis[lis.length-1];
                lastLi.parentNode.removeChild(lastLi);
            }
        </script>
    </head>
    <body>
        <input type="button" value="删除最后一个li" onclick="del();">
        <ul>
            <li>白羊</li>
            <li>金牛</li>
            <li>双子</li>
            <li>巨蟹</li>
        </ul>
    </body>
    </html>      

    【创建节点】

    步骤:

    ① 创建对象

    ② 找到父对象 parentObj

    ③ parentObj.addChild(对象);

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Document</title>
        <style>
            #div1{
                 300px;
                height: 300px;
                background: blue;
                border-bottom: 1px solid black;
            }
        </style>
        <script>
            function add(){
                //创建li
                var li = document.createElement("li");
                //创建文本节点
                var txt = document.createTextNode("海魔女");
                //插入文本节点到li
                li.appendChild(txt);
                //把li插入ul
                document.getElementsByTagName("ul")[0].appendChild(li);
            }
        </script>
    </head>
    <body>
        <input type="button" value="追加一个li" onclick="add();">
        <ul>
            <li>白羊</li>
            <li>金牛</li>
            <li>双子</li>
            <li>巨蟹</li>
        </ul>
    </body>
    </html>      
  • 相关阅读:
    记一次性能优化经历
    把一个一中的字段更新另一个表中的t-sql
    Dapper 中使用sql in 关键字查询
    HTML5 学习笔记 应用程序缓存
    HTML5学习笔记 Web存储
    HTML5 学习笔记 表单属性
    HTML5学习笔记 Geolocation(地理定位)
    vim插件之delimitMate.vim
    vim 插件之 surround.vim
    vim 脚本之快速打印log
  • 原文地址:https://www.cnblogs.com/dee0912/p/4467804.html
Copyright © 2011-2022 走看看