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列表中被删除。

  • 相关阅读:
    HTML5是否已为实际应用做好准备? 狼人:
    10月Web服务器调查:Apache下降 Ngnix攀升 狼人:
    微软IE9通过97.7%的CSS 2.1测试 狼人:
    PHP将死。何以为继? 狼人:
    Firefox 4.0 Beta 8开始开发 新引擎依然没影 狼人:
    Adobe发布Air 2.5支持RIM平板电脑 狼人:
    Firefox 4.0:我们2011年再见面吧 狼人:
    Adobe AIR登陆Android 狼人:
    Google不推荐在URL里使用竖线 狼人:
    40个很不错的CSS技术 狼人:
  • 原文地址:https://www.cnblogs.com/hamihua/p/6622869.html
Copyright © 2011-2022 走看看