• 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>
  • 相关阅读:
    MySQL导出数据库
    Struts2拦截器的应用
    Java JVM
    Http协议状态码
    6.过滤器(Filter)
    5.监听器(Listener)
    4.会话管理(Session)
    3.Servlet(二)
    2.Servlet(一)
    1.搭建JavaEE开发环境
  • 原文地址:https://www.cnblogs.com/hansonzhe/p/3593722.html
Copyright © 2020-2023  润新知