要向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. Shodan搜索引擎在信息搜集中的应用

    Shodan搜索引擎在信息搜集中的应用 作者:王宇阳 时间:2019-06-07 soudan(搜蛋),通过互联网后的通道来搜索信息:Google通过网址搜索互联网,shodan搜索互联网的在线.指定 ...

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

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

  3. arcgis api for javascript 学习（四） 地图的基本操作

    1.文章讲解的为地图的平移.放大.缩小.前视图.后视图以及全景视图的基本功能操作 2.主要用到的是arcgis api for javascript中Navigation的用法,代码如下: <! ...

  4. 【React Native】日常踩坑记录_以后将持续更新

    作为一名有理想.有抱负的一代iOS程序员,本着“我头发够多,还能学”的原则,我选择了追随那些大佬的脚步,于2018年开始了React Native. 第一步:找文档.准备安装开发环境: 第二步:一步步 ...

  5. 微信小程序使用weui构建搜索栏（searchbar）+导航（navbar）

    首先需要在lib目录中添加weui.wxss.searchbar和navbar结合主要解决两者的层次问题,即搜索框输入时,下方的检索结果能够覆盖住navbar.下面就开始发码啦: (1)wxml部分: ...

  6. Django—常见问题解决

    让Django项目运行允许外部访问 1.将python manage.py runserver 改为 python manage.py runserver 0.0.0.0:80 或者 python m ...

  7. 无法打开“Visual Studio Code”，因为Apple无法检查其是否包含恶意软件。”的问题解决

    解决方法: 1.系统偏好设置==> 安全性与隐私 ===> 在下方允许就可以了. 2.一劳永逸 但是注意安全性 打开terminal 命令行工具输入命令:sudo spctl --mast ...

  8. c# WF 第5节 窗体的控件

    本节内容: 1:控件在哪里 2:控件怎么添加 3:窗口的显示与隐藏 4:实例单击窗体,出现另一个窗体 1:控件在哪里 视图 --> 工具箱 2:控件怎么添加 第一种:从工具箱直接拉 第二种:在代 ...

  9. SpringMVC常用注解（三）

    一.@Controller .@RestController 和 @ControllerAdvice 1. @Controller @Controller 用于标记在一个类上,使用它标记的类就是一个S ...

  10. 移动端(手机端)页面自适应解决方案1（rem布局）---750设计稿

    设计稿尺寸为750 * 1340.结合网易.淘宝移动端首页html元素上的动态font-size属性.设计稿尺寸.前端与设计之间协作流程一般分为下面两种: 网易做法: 页面开头处引入下面这段代码,用于 ...