zoukankan      html  css  js  c++  java
  • JavaScript HTML DOM 节点

    要向HTML DOM添加新元素,必须首先创建元素(元素节点),然后将其附加到现有元素。

    <!DOCTYPE html>
    <html>
    <meta charset="utf-8">
    <title>教程(jc2182.com)</title>
    <body>
    <div id="div1">
        <p id ="p1">这是一个段落。</p>
        <p id ="p2">这是另一段。</p>
    </div>
    
    <script>
        var para = document.createElement("p");
        var node = document.createTextNode("这是新的.");
        para.appendChild(node);
        var element = document.getElementById("div1");
        element.appendChild(para);
    </script>
    
    </body>
    </html>

    appendChild()上一个示例中的方法将新元素作为父项的最后一个子项附加。如果您不希望可以使用insertBefore()方法:

    <!DOCTYPE html>
    <html>
    <meta charset="utf-8">
    <title>蝴蝶(jc2182.com)</title>
    <body>
    
    <div id="div1">
        <p id ="p1">这是一个段落。</p>
        <p id ="p2">这是另一段。</p>
    </div>
    
    <script>
        var para = document.createElement("p");
        var node = document.createTextNode("这是新的.");
        para.appendChild(node);
    
        var element = document.getElementById("div1");
        var child = document.getElementById("p1");
        element.insertBefore(para,child);
    </script>
    
    </body>
    </html>

    要将元素替换为HTML DOM,请使用以下replaceChild()方法:

    <!DOCTYPE html>
    <html>
    <meta charset="utf-8">
    <title>蝴蝶(jc2182.com)</title>
    <body>
    
    <div id="div1">
        <p id ="p1">这是一个段落。</p>
        <p id ="p2">这是另一段。</p>
    </div>
    
    <script>
        var parent = document.getElementById("div1");
        var child = document.getElementById("p1");
        var para = document.createElement("p");
        var node = document.createTextNode("这是新的.");
        para.appendChild(node);
        parent.replaceChild(para,child);
    </script>
    
    </body>
    </html>

    JavaScript HTML DOM 节点的增删改查

  • 相关阅读:
    Android WebView使用
    Android
    Instant Buy Android API Tutorial
    cocos2dx 手势识别
    cocos2d-x 判断两条直线是否相交
    golang 环境bash 以及shell
    技术描述
    golang web开发获取get、post、cookie参数
    Linux curl 模拟form表单提交信息和文件
    Golang HTTP文件上传
  • 原文地址:https://www.cnblogs.com/jc2182/p/11626445.html
Copyright © 2011-2022 走看看