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>      
  • 相关阅读:
    基于NFS实现WordPress
    基于三台主机部署phpwind
    phpMyAdmin安装部署
    配置LAMP实现WordPress
    配置HTTPS服务
    部署DNS服务
    文本三剑客---awk(gawk)基础
    文本三剑客---sed 基础
    2019-2020-1 20199308《Linux内核原理与分析》第七周作业
    2019-2020-1 20199308《Linux内核原理与分析》第六周作业
  • 原文地址:https://www.cnblogs.com/dee0912/p/4467804.html
Copyright © 2011-2022 走看看