要向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 节点的增删改查

JavaScript HTML DOM 节点的更多相关文章

  1. JavaScript操作DOM节点

    DOM (文档对象模型(Document Object Model)) 文档对象模型(Document Object Model,简称DOM),是W3C组织推荐的处理可扩展标志语言的标准编程接口.在网 ...

  2. 前端JavaScript之DOM节点操作

    1.HTML DOM是啥 Document Object Model:定义了访问和操作HTML文档的标准方法,把HTML文档呈现为带有元素,属性和文本的树状结构 2.解析过程 HTML加载完毕,渲染引 ...

  3. 使用JavaScript操作DOM节点元素的常用方法(创建/删除/替换/复制等)

    getElementById(id)这是通过id来访问某一元素,最常用的之一,例:<html><body><div id="myid">test ...

  4. javascript与DOM节点的结合使用

    文档对象模型(Document Object Model,简称DOM),是W3C组织推荐的处理可扩展标志语言的标准编程接口.在网页上,组织页面(或文档)的对象被组织在一个树形结构中,用来表示文档中对象 ...

  5. 【Javascript】 DOM节点

    HTML文档中一切都是节点! 整个文档是文档节点: 注释是注释节点: 每一个HTML元素都是一个元素节点: 元素内的文本内容是文本节点: 连元素的每一个属性都是一个属性节点. 看到这些是不是感觉很熟悉 ...

  6. JavaScript中DOM节点层次Text类型

    文本节点 标签之间只要有一点内容都会有文本节点,包括空格 创建文本节点document.createTextNode() 可以使用 document.createTextNode 创建新文本节点 == ...

  7. javascript 插入DOM节点

    1.使用appendChild,把一个子节点添加到父节点的最后一个子节点,.innerText插入的是内容 HTML <!-- HTML结构 --> <p id="js&q ...

  8. JavaScript之DOM节点操作

    a.appendChild(b)  追加标签 a是b的父级,将b追加到a中 追加标签  a.insertBefore(b,c);  a是b和c的父级,在c前面插入b 删除标签  a.removeCli ...

  9. JavaScript修改DOM节点时，样式优先级的问题

    通过element.style.xxx设置或者读取的xxx样式属性,都是属于行间样式(<p style="color=red"></p>),并不是 使用li ...

随机推荐

  1. linux用户管理章节笔记

    1 更改有效用户组 :newgrp zeng 把当前用户的有效用户组更改为zeng.事后可以使用groups命令查看. 2 在使用useradd命令增加用户时,在/etc/passwd的值一般会参考 ...

  2. windows10 设置 socks5 代理

    这个很多年前就是这种方式了,最近配置又忘了,今天备份一下: 方法1: 方法2: 原文链接 如果能帮助到你,希望能点击右下角推荐,感谢!

  3. Ubuntu18.04安装配置

    GPT硬盘安装Ubuntu 磁盘管理工具压缩一个5GB的Fat32的分区,然后将ISO文件解压到Fat32分区 利用Hasleo EasyUEFI工具添加EFI引导 *:\EFI\BOOT\grubx ...

  4. C学习笔记（11）--- 可变参数，浅谈内存管理 【C基础概念系列完结】

    1.可变参数(variable arguments): 可变参数允许您定义一个函数,能根据具体的需求接受可变数量的参数. int func(int, ... )             (函数 fun ...

  5. luoguP3071 [USACO13JAN]座位Seating

    https://www.luogu.org/problem/P3071 AC代码: https://www.luogu.org/blog/user33426/solution-p3071 莫名其妙RE ...

  6. Keras：

    https://keras.io/zh/layers/core/ keras使用稀疏输入进行训练 2018.06.14 12:55:46字数 902阅读 760 稀疏矩阵 稀疏矩阵是指矩阵中数值为0的 ...

  7. python-文件操作&模块&面向对象

    python 文件处理 li = [[']] for i in li: print(','.join(i)) # join字符串拼接 语文,数学,英语 100,122,123 从原文件末尾开始写入 # ...

  8. Ultimate Chicken Horse GameProject第三次迭代成果文档

    经过三次迭代我们实现了游戏的基本功能 项目文档的github链接:https://github.com/k6tok12355/Ultimate-Chicken-Horse 下面是我们在第一次迭代中设定 ...

  9. IPv6 邻居状态迁移

  10. 剑指offer：序列化二叉（前序遍历+层次）

    1. 题目描述 /** 请实现两个函数,分别用来序列化和反序列化二叉树 二叉树的序列化是指:把一棵二叉树按照某种遍历方式的结果以某种格式保存为字符串,从而使得内存中建立起来的二叉树可以持久保存. 序列 ...