要向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. swif(六)swift闭包

    // // main.swift // LessonSwiftSix // // Created by keyan on 15/9/13. // Copyright (c) 2015年 keyan. ...

  2. 3.智能快递柜(通信篇-HTTP)

    1.智能快递柜(开篇) 2.智能快递柜(终端篇) 3.智能快递柜(通信篇-HTTP) 4.智能快递柜(通信篇-SOCKET) 5.智能快递柜(通信篇-Server程序) 6.智能快递柜(平台篇) 7. ...

  3. gitlab从开发分支合并代码到master分支

    你敢相信这是个码农? 新项目开发完成,代码要封版.开发分支是dev,将代码合并到master时可费了劲儿了,上周我们几个同事前前后后折腾了两天,还是有问题. 今天上完线必须要封版了.所以务必得搞定. ...

  4. mysql-python 安装错误 fatal error C1083: Cannot open include file: 'config-win.h': No such file or directory

    安装mysql-python之前, 请先安装setuptools. https://pypi.python.org/pypi/setuptools/7.0 下载mysql-python. 下载源码包. ...

  5. 编译安装 proxychains-ng proxychains4

    下载 [root@localhost html]# git clone https://github.com/rofl0r/proxychains-ng.git 编译安装 [root@localhos ...

  6. JavaScript—图片与base64编码互相转换

    图片转换为base64编码 <input type = "file" id = "file" onchange="popFileName(thi ...

  7. itest(爱测试) 3.3.5 发布，开源敏捷测试管理 & BUG 跟踪管理软件

    v3.3.5 下载地址 :itest下载 itest 简介:查看简介 V3.3.5 有 6个功能增强,2个BUG修复 ,详情如下所述. 用户反馈并强烈要求增强的功能实现:    1: 测试用例管理可线 ...

  8. mysql 高级查询二

    各种showshow columns from my_student;show grants for root;show aviables;show processlist;show table st ...

  9. table的常用属性

    Table属性: Cellspacing:单元格与单元格之间或者单元格与表格之间的 距离. Cellpadding:单元格边框与内容之间的距离 Colspan:跨列.合并列. Rowspan:跨行,行 ...

  10. 2019 SDN上机第四次作业

    2019 SDN上机第4次作业 1. 解压安装OpenDayLight控制器(本次实验统一使用Beryllium版本) 修改环境变量 2. 启动并安装插件 3. 用Python脚本搭建如下拓扑,连接O ...