• HTML DOM


    http://www.w3school.com.cn/htmldom/dom_modify.asp

    创建新的 HTML 元素

    如需向 HTML DOM 添加新元素,您首先必须创建该元素(元素节点),然后把它追加到已有的元素上。

    实例

    <div id="d1">
    <p id="p1">This is a paragraph.</p>
    <p id="p2">This is another paragraph.</p>
    </div>
    
    <script>
    var para=document.createElement("p");
    var node=document.createTextNode("This is new.");
    para.appendChild(node);
    
    var element=document.getElementById("d1");
    element.appendChild(para);
    </script>

    创建新的 HTML 元素 - insertBefore()

    上一个例子中的 appendChild() 方法,将新元素作为父元素的最后一个子元素进行添加。

    如果不希望如此,您可以使用 insertBefore() 方法:

    实例

    <div id="div1">
    <p id="p1">This is a paragraph.</p>
    <p id="p2">This is another paragraph.</p>
    </div>
    
    <script>
    var para=document.createElement("p");
    var node=document.createTextNode("This is new.");
    para.appendChild(node);
    
    var element=document.getElementById("div1");
    var child=document.getElementById("p1");
    element.insertBefore(para,child);
    </script>

    删除已有的 HTML 元素

    如需删除 HTML 元素,您必须清楚该元素的父元素:

    实例

    <div id="div1">
    <p id="p1">This is a paragraph.</p>
    <p id="p2">This is another paragraph.</p>
    </div>
    <script>
    var parent=document.getElementById("div1");
    var child=document.getElementById("p1");
    parent.removeChild(child);
    </script>

    提示:能否在不引用父元素的情况下删除某个元素?

    很抱歉。DOM 需要了解您需要删除的元素,以及它的父元素。

    这里提供一个常用的解决方法:找到您需要删除的子元素,然后使用 parentNode 属性来查找其父元素:

    var child=document.getElementById("p1");
    child.parentNode.removeChild(child);

    替换 HTML 元素

    如需替换 HTML DOM 中的元素,请使用 replaceChild() 方法:

    实例

    <div id="div1">
    <p id="p1">This is a paragraph.</p>
    <p id="p2">This is another paragraph.</p>
    </div>
    
    <script>
    var para=document.createElement("p");
    var node=document.createTextNode("This is new.");
    para.appendChild(node);
    
    var parent=document.getElementById("div1");
    var child=document.getElementById("p1");
    parent.replaceChild(para,child);
    </script>
  • 相关阅读:
    CSV 文件的读写(函数)
    携带cookies请求github个人信息(类封装)
    网络和http协议理论
    思卡乐科技发布SR3系列RFID产品
    爱立信开始大规模mesh网络测试
    NB-IoT物联网,来了
    想象力是我们的局限,蓝牙5应用初探
    RFID电动车管理,智慧城市物联网建设的入口
    蓝牙模块选择经验谈
    RFID电动自行车与共享单车之物联网比较
  • 原文地址:https://www.cnblogs.com/hansonzhe/p/3593722.html
Copyright © 2020-2023  润新知