添加和删除节点(HTML 元素)

创建新的 HTML 元素 

如需向 HTML DOM 添加新元素,您必须首先创建该元素(元素节点),然后向一个已存在的元素追加该元素。

例如:这段代码创建新的 <p> 元素:
var para=document.createElement("p");
如需向 <p> 元素添加文本,您必须首先创建文本节点。这段代码创建了一个文本节点:
var node=document.createTextNode("这是新段落。");
然后您必须向 <p> 元素追加这个文本节点:
para.appendChild(node);
最后您必须向一个已有的元素追加这个新元素。
这段代码找到一个已有的元素:
var element=document.getElementById("div1");
这段代码向这个已有的元素追加新元素:
element.appendChild(para);

  

删除已有的 HTML 元素

如需删除 HTML 元素,您必须首先获得该元素的父元素:

例子解释:
这个 HTML 文档含有拥有两个子节点(两个 <p> 元素)的 <div> 元素:
<div id="div1">
<p id="p1">这是一个段落。</p>
<p id="p2">这是另一个段落。</p>
</div>
找到 id="div1" 的元素:
var parent=document.getElementById("div1");
找到 id="p1" 的 <p> 元素:
var child=document.getElementById("p1");
从父元素中删除子元素:
parent.removeChild(child);

 提示:如果能够在不引用父元素的情况下删除某个元素,就太好了。

不过很遗憾。DOM 需要清楚您需要删除的元素,以及它的父元素。

这是常用的解决方案:找到您希望删除的子元素,然后使用其 parentNode 属性来找到父元素:

        var child=document.getElementById("p1");
child.parentNode.removeChild(child);
 

JavaScript HTML DOM 元素(节点)的更多相关文章

  1. JavaScript HTML DOM 元素(节点)

    JavaScript HTML DOM 元素(节点) 创建新的 HTML 元素 创建新的 HTML 元素 如需向 HTML DOM 添加新元素,您必须首先创建该元素(元素节点),然后向一个已存在的元素 ...

  2. JavaScript HTML DOM元素节点常用操作接口

    在文档对象模型 (DOM) 中,每个节点都是一个对象.DOM 节点有三个重要的属性 : 1. nodeName : 节点的名称 2. nodeValue :节点的值 3. nodeType :节点的类 ...

  3. JavaScript之DOM创建节点

    上几篇文章中我们罗列了一些获取HTML页面DOM对象的方法,当我们获取到了这些对象之后,下一步将对这些对象进行更改,在适当的时候进行对象各属性的修改就形成了我们平时看到的动态效果.具体js中可以修改D ...

  4. JavaScript HTML DOM 元素操作(节点)

      在文档对象模型 (DOM) 中,每个节点都是一个对象.DOM 节点有三个重要的属性 : 1. nodeName : 节点的名称 2. nodeValue :节点的值 3. nodeType :节点 ...

  5. JavaScript 要点(十四)HTML DOM 元素(节点)

    A.创建新的 HTML 元素 如需向 HTML DOM 添加新元素,必须首先创建该元素(元素节点),然后向一个已存在的元素追加该元素. <div id="div1"> ...

  6. JavaScript获取DOM元素位置和尺寸大小

      在一些复杂的页面中经常会用JavaScript处理一些DOM元素的动态效果,这种时候我们经常会用到一些元素位置和尺寸的计算,浏览器兼容性问题也是不可忽略的一部分,要想写出预想效果的JavaScri ...

  7. JavaScript的DOM操作(节点操作)

    创建节点createElement()var node = document.createElement(“div”);没什么可说的,创建一个元素节点,但注意,这个节点不会被自动添加到文档(docum ...

  8. javascript中获取元素节点的文本

    <div id="test"> <strong>i'm strong</strong> </div> 1.elementNode.i ...

  9. 【面试必备】javascript操作DOM元素

    前言 时间过的真快,不知不觉就到年底了.问问自己,这一年你对自己的工作满意吗? 评价标准是什么呢?当然是马云的那两条准则了:钱给到了吗?干的爽吗?如果答案都是no,那么,你准备好跳槽了吗? 为了应对年 ...

随机推荐

  1. Value Object(值对象)如何使用 EF 进行正确映射

    DDD 领域驱动设计-Value Object(值对象)如何使用 EF 进行正确映射 写在前面 首先,这篇博文是用博客园新发布的 MarkDown编辑器 编写的,这也是我第一次使用,语法也不是很熟悉, ...

  2. 安卓推送——个推服务端api使用误区

    首先你需要在个推开放着平台上注册你的应用,以及获得以下几个必要的值APPID |APPKEY | MASTERSECRET,本文假设你已经完成上述步骤以及完成客户端SDK的集成. 原理 个推服务端ap ...

  3. MVC之验证

    MVC之验证 有时候我觉得,很多人将一个具体的技术细节写的那么复杂,我觉得没有必要,搞得很多人一头雾水的,你能教会别人用就成了,具体的细节可以去查MSDN什么的,套用爱因斯坦的名言:能在网上查到的就不 ...

  4. 使用Eclipse开始Java编程

    欢迎访问我的新博客:http://www.milkcu.com/blog/ 原文地址:http://www.milkcu.com/blog/archives/start-java-programing ...

  5. c#中关于大对象数组的一些心得

    在之前的一个课题中,曾经需要用到2W行*3W列的float类型矩阵(大约2.4G),由于无法创建大于2G的对象,当时采用了一些取巧的办法回避了,并没有拿出精力来研究一下这个问题.今天和公司的张哥(大牛 ...

  6. CSS3(transform/transition/animation) 基础 总结

    1.CSS3新增的样式(常用) //颜色透明表示rgba(0,0,0,.5) //圆角(定义角半径)border-radius: 5px 10px 15px 20px; //文字/盒子阴影text-s ...

  7. python 获取当前时间

    我有的时候写程序要用到当前时间,我就想用python去取当前的时间,虽然不是很难,但是老是忘记,用一次丢一次,为了能够更好的记住,我今天特意写下python 当前时间这篇文章,如果你觉的对你有用的话, ...

  8. C# 号码归属地查询算法(根据Android来电归属地二进制文件查询修改)

    前言 近期有个项目需要用到号码归属查询,归属地数据库可能比不上ip138,淘宝上也有卖的-,-! 文本提供一个279188条记录并压缩成562KB的归属地数据.我在互联网上搜索了相关文章,要不是数据库 ...

  9. LinqToXml高级用法介绍

    LinqToXml高级用法介绍 一.函数构造 什么是函数构造?其是指通过单个语句构建XML树的能力. 那么它有什么作用呢? 作用1.用单个表达式快速创建复杂的XML树 见实例代码CreateXml( ...

  10. spring.net AOP通知类型

    上篇介绍了spring.net AOP的基本实现,其中有说到通知类型,首先在这里补充解释一下.最后出一个异常通知的实例,因为他的实现和别的通知有些不一样. 1.拦截环绕通知:在Spring中最基础的通 ...