1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <meta charset="utf-8">
  5. <title>菜鸟教程(runoob.com)</title>
  6. </head>
  7. <body>
  8.  
  9. <div id="div1">
  10. <p id="p1">这是一个段落。</p>
  11. <p id="p2">这是另外一个段落。</p>
  12. </div>
  13.  
  14. <script>
  15. var para = document.createElement("p");
  16. var node = document.createTextNode("这是一个新的段落。");
  17. para.appendChild(node);
  18.  
  19. var element = document.getElementById("div1");
  20. element.appendChild(para);
  21. </script>
  22.  
  23. </body>
  24. </html>

  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <meta charset="utf-8">
  5. <title>菜鸟教程(runoob.com)</title>
  6. </head>
  7. <body>
  8.  
  9. <div id="div1">
  10. <p id="p1">这是一个段落。</p>
  11. <p id="p2">这是另外一个段落。</p>
  12. </div>
  13.  
  14. <script>
  15. var para = document.createElement("p");
  16. var node = document.createTextNode("这是一个新的段落。");
  17. para.appendChild(node);
  18.  
  19. var element = document.getElementById("div1");
  20. var child = document.getElementById("p1");
  21. element.insertBefore(para, child);
  22. </script>
  23.  
  24. </body>
  25. </html>

  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <meta charset="utf-8">
  5. <title>菜鸟教程(runoob.com)</title>
  6. </head>
  7. <body>
  8.  
  9. <div id="div1">
  10. <p id="p1">这是一个段落。</p>
  11. <p id="p2">这是另外一个段落。</p>
  12. </div>
  13.  
  14. <script>
  15. var parent = document.getElementById("div1");
  16. var child = document.getElementById("p1");
  17. parent.removeChild(child);
  18. </script>
  19.  
  20. </body>
  21. </html>

  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <meta charset="utf-8">
  5. <title>菜鸟教程(runoob.com)</title>
  6. </head>
  7. <body>
  8.  
  9. <div id="div1">
  10. <p id="p1">这是一个段落。</p>
  11. <p id="p2">这是另外一个段落。</p>
  12. </div>
  13.  
  14. <script>
  15. var para = document.createElement("p");
  16. var node = document.createTextNode("这是一个新的段落。");
  17. para.appendChild(node);
  18.  
  19. var parent = document.getElementById("div1");
  20. var child = document.getElementById("p1");
  21. parent.replaceChild(para, child);
  22. </script>
  23.  
  24. </body>
  25. </html>

吴裕雄--天生自然 JAVASCRIPT开发学习：HTML DOM 元素 (节点)的更多相关文章

  1. 吴裕雄--天生自然 JAVASCRIPT开发学习：DOM EventListener

    <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title> ...

  2. 吴裕雄--天生自然 JAVASCRIPT开发学习： DOM 事件

    <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title> ...

  3. 吴裕雄--天生自然 JAVASCRIPT开发学习： DOM - 改变 HTML

    <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title> ...

  4. 吴裕雄--天生自然 JAVASCRIPT开发学习： DOM

    <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title> ...

  5. 吴裕雄--天生自然 JAVASCRIPT开发学习：对象 实例（2）

    <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title> ...

  6. 吴裕雄--天生自然 JAVASCRIPT开发学习：条件语句

    <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title> ...

  7. 吴裕雄--天生自然 JAVASCRIPT开发学习：对象

    <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title> ...

  8. 吴裕雄--天生自然 JAVASCRIPT开发学习

    <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title> ...

  9. 吴裕雄--天生自然 JAVASCRIPT开发学习：函数定义

    <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title> ...

  10. 吴裕雄--天生自然 JAVASCRIPT开发学习： this 关键字

    <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title> ...

随机推荐

  1. gem5-gpu 运行 PARSEC2.1

    PARSEC是针对共享内存多核处理器(CPU)的一套基准测试程序,详细介绍见wiki:http://wiki.cs.princeton.edu/index.php/PARSEC,主要参考:http:/ ...

  2. pig安装配置及实例

    一.前提 1. hadoop集群环境配置好(本人hadoop版本:hadoop-2.7.3) 2. windows基础环境准备: jdk环境配置.esclipse环境配置 二.搭建pig环境 1.下载 ...

  3. JSONObject 和JSONArray基本使用

    1. 打包 JSONObject jsonObject = new JSONObject(); jsonObject.put("code", "200"); j ...

  4. BBS那些事儿

    目录 1 注册 2 登陆 3 图片验证码相关 4 首页相关,Django Admin后台录入数据 5 注销功能 6 修改密码 7 用户头像展示,media配置 8 个人站点,个人侧边栏 9 侧边栏筛选 ...

  5. POJ 2309：BST lowbit

    BST Time Limit: 1000MS   Memory Limit: 65536K Total Submissions: 9140   Accepted: 5580 Description C ...

  6. sourceTree 生成公钥和私钥 然后拉项目代码

    第一步 用sourceTree生成公钥pub和私钥文件ppk    打开sourceTree -> 工具 -> 创建或导入ssh密钥 -> 点击generate -> 上面会显 ...

  7. s5pc100开发板Nand flash移植

    相关软件下载地址:http://pan.baidu.com/s/16yo8Y fsc100开发板 交叉编译工具:arm-cortex_a8-linux-gnueabi-gcc Ÿ   添加针对我们平台 ...

  8. 第四篇：Vue的项目开发

    安装Vue的脚手架cli环境 1)官网下载并安装node,附带npm https://nodejs.org/zh-cn/ node环境: 可以解释执行js语言 提供了npm应用商城,可以为node环境 ...

  9. 四十、SAP中CASE语句用法

    一.上代码 二.选择内容 三.输出 四.我们选择一个其他的值 五.查看输出

  10. 吴裕雄--天生自然C++语言学习笔记：C++ 数字

    下面是一个 C++ 中定义各种类型数字的综合实例: #include <iostream> using namespace std; int main () { // 数字定义 short ...