<!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>

吴裕雄--天生自然 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. GAN网络进行图片增强

    GAN网络进行图片增强 基于Tensorflow框架 调用ModifyPictureSize.py文件 代码如下: from skimage import io,transform,color imp ...

  2. Rabbitmq之高级特性——实现消费端限流&NACK重回队列

    如果是高并发下,rabbitmq服务器上收到成千上万条消息,那么当打开消费端时,这些消息必定喷涌而来,导致消费端消费不过来甚至挂掉都有可能. 在非自动确认的模式下,可以采用限流模式,rabbitmq ...

  3. C语言里面和时间有关的函数

    参考链接 https://blog.csdn.net/ffcjjhv/article/details/83376767 0)Head file #include "time.h" ...

  4. 3.python进制及其之间的转换

  5. 036-PHP闭包函数的域限制，与如何向闭包函数传递变量

    <?php // 闭包函数的域限制,与如何向闭包函数传递变量 # 隐藏上面的代码,我们最后再来试下 function demo($ATxt) { $func = function () use ...

  6. 调试ASP.NET程序

    用VS打开你的项目 从VS中找到"调试"-----"附件到进程",然后选中w3wp.exe,点击附件到进程,然后再发送数据进行调试就可以了

  7. 【转】AutoMapper对象映射

    什么是AutoMapper?AutoMapper是一个简单的小型库,用于解决一个看似复杂的问题 - 摆脱将一个对象映射到另一个对象的代码.这种类型的代码是相当沉闷和无聊的写,所以为什么不发明一个工具来 ...

  8. 【CF1154G】Minimum Possible LCM

    题意 给你 \(n\) 个数 \(a_i\) ,求出 \(\text{lcm}\) 最小的一对数. \(n\le 10^6, a_i\le 10^7\) 题解 直接枚举 ,找到当前数最小的两个倍数,统 ...

  9. hex、Base64

    一.什么是Hex 将每一个字节表示的十六进制表示的内容,用字符串来显示. 二.作用 将不可见的,复杂的字节数组数据,转换为可显示的字符串数据 类似于Base64编码算法 区别:Base64将三个字节转 ...

  10. 【题解】Acting Cute

    题目简介 正在 rainbow 的城堡游玩的 Freda 恰好看见了在地毯上跳舞卖萌的水叮当--于是-- Freda:"呜咕>_< 我也要卖萌T_T!" rainbow ...