要向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. 跳转常规 -- 为什么不要使用404、500等http状态码作为业务代码响应

    不要使用HTTP状态码作为业务代码响应 HTTP状态码 是指浏览器访问网址,成功或异常时浏览器或服务器告知用户的代码数字,它指的是网络或服务器的状态,有着不同的含义. 参加MDN.Java Api,常 ...

  2. canvas绘制流程图

    最近在做一个需求,根据数据动态生成以下类似的流程图,需要可以设置每个节点的颜色,每个节点可添加点击移动等相关的事件 代码中有做很多的注释和说明,相关的文档说明链接:https://9eb75i.axs ...

  3. opencv::基于颜色跟踪检测

    基于颜色跟踪 inRange过滤 形态学操作提取 轮廓查找 外接矩形获取 位置标定

  4. 区块链社交APP协议分析：Qbao

    - Qbao是什么 - Qbao报文情况 本节我们开始使用Qbao软件,并抓取其报文进行分析. 对APP进行协议分析抓包的一般过程是: 1.打开抓包APP进行抓包: 2.打开APP开始使用: 3.对每 ...

  5. 开源项目Telegram源码 Telegram for Android Source

    背景介绍 Telegram 是一款跨平台的即时通信软件,它的客户端是自由及开放源代码软件.用户可以相互交换加密与自毁消息,发送照片.影片等所有类型文件.官方提供手机版.桌面版和网页版等多种平台客户端. ...

  6. git本地忽略

    添加本地忽略文件 git update-index --assume-unchanged 忽略的文件名 恢复本地忽略文件 git update-index --no-assume-unchanged ...

  7. RdKafka文档翻译

    函数string rd_kafka_err2str ( integer $err ) 将rdkafka错误代码转换为字符串 integer rd_kafka_errno2err ( integer $ ...

  8. springboot依赖

    springboot依赖整合 <parent> <groupId>org.springframework.boot</groupId> <artifactId ...

  9. Python—下载安装与使用

    安装依赖包 首先安装gcc编译器,编译时需要使用gcc.gcc有些系统版本已经默认安装,通过  gcc --version  查看,没安装的先安装 [root@localhost ~]# yum -y ...

  10. Jmeter通过正则表达式获取登录后token

    1.引用名称:即参数化,便于后面调用登录后获取的token 2.正则表达式:"token":"([0-9 a-z -]+?)" 3.模板:设置为 "$ ...