要向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. [收藏]Dubbo官方资料

    首页  ||  下载  ||  用户指南  ||  开发者指南  ||  管理员指南  ||  培训文档  ||  常见问题解答  ||  发布记录  ||  发展路线  ||  社区 English ...

  2. weblogic新增域并进行Jconsole监听

    一.创建域: 第一步,打开域配置界面: [bofm@UAT02-BIZ-ZJCG-AP-002 bin]$ cd /home/software/weblogic/Oracle/Middleware/w ...

  3. mysql综合性练习

    题目描述 设定有一个数据库,里面有4张表: 学生表(student) 课程表(course) 成绩表(score) 教师信息表(teacher) 表结构如下: 表一_学生表(student) 属性名 ...

  4. 导入部署 hand

    差价导入部署步骤如下: 执行视图,包. 定义消息,验证的时候使用(XXC1003DFM_BI_001 到 XXC1003DFM_BI_007,含中英文). 通用导入设置: 电子表元数据管理,含导入正确 ...

  5. 解决springboot读取jar包中文件的问题

    转载自: https://www.oschina.net/question/2272552_2269641 https://stackoverflow.com/questions/25869428/c ...

  6. 01day-webpack

    <!-- .sass后缀的文件名 比较老了 现在它的后缀名是.scss 其实他们是同一个东西 只是 后缀名发生了变化 以 .sass写的文件的内容是 他没有括号 没有分号 有点怪 它跟新为了.s ...

  7. 【poj3207】Ikki's Story IV - Panda's Trick（2-sat）

    传送门 题意: 给出一个圆,圆上有\(n\)个点,依次为\(0,1,\cdots,n-1\). 现在要连接\(m\)对点,每次连接时可以直接从里面连,也可以从外面连. 最后问,连完这\(m\)对点后, ...

  8. drf框架知识总结

  9. zz“老司机”成长之路：自动驾驶车辆调试实践

    随着自动驾驶技术的发展,一辆新车从被改装到上路需要经过的调试流程也有了许多提升.今天,我希望结合自己之前的调车经验来跟大家分享一下我们是如何将系统的各个模块逐步上车.调试.集成,进而将一辆“新手”车培 ...

  10. 在实际工作中使用requests+unittest进行接口测试

    之前学习python做接口测试时,用的时requests+excel的方式来进行接口测试,后来在工作中也用unittest来做了一个项目的接口测试,接口测试用例完全基于unittest来编写,把大致步 ...