zoukankan      html  css  js  c++  java
  • JavaScript之节点的创建、替换、删除、插入

    1.节点的创建

    节点的创建使用document.creatElment();文本节点的创建使用document.creatTextNode();如想把<li>哈密瓜</li>添加到一个如下所示的列表中

    <ul id = "fruit">
        <li>苹果</li>
        <li>橘子</li>
        <li>西瓜</li>
        <li>梨</li>
    </ul>

    可添加如下javascript代码

    var frNode = document.getElementById("fruit");
    var liNode = creatElement("li");
    var hmgNode = creatTextNode("哈密瓜");
    liNode.appendChild(hmgNode);
    frNode.appendChild(liNode);

    2.节点的替换

    节点的替换可使用parentNode.replaceChild(newNode,oldNode);这里的oldNode是将要被替换的节点,newNode是替换的节点,parentNode是oldNode的父节点。示例代码如下

    <ul id = "fruit">
        <li id = "apple">苹果</li>
        <li id = "orange">橘子</li>
        <li>西瓜</li>
        <li>梨</li>
    </ul>
    <ul id = "food">
        <li id = "biscuit">饼干</li>
        <li>米饭</li>
        <li>牛肉</li>
        <li>面条</li>
    </ul>

    可添加如下javascript代码

    var frNode = document.getElementById("fruit");
    var apNode = document.getElementById("apple");
    var biNode = document.getElemetnById("biscuit");
    frNode.replace(biNode,apNode);

    此时苹果被饼干所替代,同时饼干在food列表中被删除。

    3.节点的删除

    节点的删除使用removeChild(),这里有一个简便的方法删除节点,比如说想要删除上面那个fruit列表中的apple标签,则

    var apNode = document.getElementById("apple");
    apNode.parentNode.removeChild(apNode);

    也就是说要想删除某个节点,可以使用这个节点的父节点的removeChild()方法删除这个节点。

    4.节点的插入

    节点的插入使用insertBefore(newNode,nextNode)方法,即在某个节点之前插入新节点。比如我们想要在fruit列表中加入food列表中的饼干,则

    var frNode = document.getElementById("fruit");
    var orNode = document.getElementById("orange");
    var biNode = document,getElementById("biscuit");
    frNode.insertBefore(biNode,orNode);

    这样饼干被加入到fruit列表中,同时在food列表中被删除。

  • 相关阅读:
    给定中序和后序遍历,求前序序列(C++递归方式实现)
    myeclipse2014删除antlr-2.7.2.jar--解决struts和hibernate包冲突
    hadoop1.2.1配置与运行子串统计程序
    任务计划crontab
    建NTP
    vnc下运行runInstall报java错误
    rpm软件安装
    redis
    rpm包和deb包转换
    新老版本centos下载
  • 原文地址:https://www.cnblogs.com/hamihua/p/6622869.html
Copyright © 2011-2022 走看看