zoukankan      html  css  js  c++  java
  • 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>
  • 相关阅读:
    假丶依赖注入
    .NET Core 傻瓜式CSRedisCore缓存
    .NET Core MD5加密 32位和16位
    数据库所对应的函数
    使用通配符进行过滤
    WHERE 子句操作符
    不同的数据库查询行数的方式
    第一课了解SQL
    微服务架构综述
    三层应用与单块架构
  • 原文地址:https://www.cnblogs.com/hansonzhe/p/3593722.html
Copyright © 2011-2022 走看看