zoukankan      html  css  js  c++  java
  • 吴裕雄--天生自然 JAVASCRIPT开发学习:HTML DOM 元素 (节点)

    <!DOCTYPE html>
    <html>
    <head>
    <meta charset="utf-8">
    <title>菜鸟教程(runoob.com)</title>
    </head>
    <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>

    <!DOCTYPE html>
    <html>
    <head>
    <meta charset="utf-8">
    <title>菜鸟教程(runoob.com)</title>
    </head>
    <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>

    <!DOCTYPE html>
    <html>
    <head>
    <meta charset="utf-8">
    <title>菜鸟教程(runoob.com)</title>
    </head>
    <body>
    
    <div id="div1">
    <p id="p1">这是一个段落。</p>
    <p id="p2">这是另外一个段落。</p>
    </div>
     
    <script>
    var parent = document.getElementById("div1");
    var child = document.getElementById("p1");
    parent.removeChild(child);
    </script>
    
    </body>
    </html>

    <!DOCTYPE html>
    <html>
    <head>
    <meta charset="utf-8">
    <title>菜鸟教程(runoob.com)</title>
    </head>
    <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 parent = document.getElementById("div1");
    var child = document.getElementById("p1");
    parent.replaceChild(para, child);
    </script>
    
    </body>
    </html>

  • 相关阅读:
    读写文件时遇到编码问题解决方法
    记录vim经常使用的几个命令
    linux 安装nginx+php+mysql
    php 几种排序模式
    rsync同步的艺术
    关于nuxt项目部署和更新
    springboot使用mybatis时报错Invalid bound statement (not found)
    Springboot 接受前端数据报错 "status": 415,"error": "Unsupported Media Type"
    youtube网页版 评论显示不出来
    [SPDK/NVMe存储技术分析]015
  • 原文地址:https://www.cnblogs.com/tszr/p/10944311.html
Copyright © 2011-2022 走看看