JavaScript HTML DOM 元素(节点)
JavaScript HTML DOM 元素(节点)
创建新的 HTML 元素
创建新的 HTML 元素
如需向 HTML DOM 添加新元素,您必须首先创建该元素(元素节点),然后向一个已存在的元素追加该元素。
实例
<p id="p1">This is a paragraph.</p>
<p id="p2">This is another paragraph.</p>
</div>
<script>
var para=document.createElement("p");
var node=document.createTextNode("This is new.");
para.appendChild(node);
var element=document.getElementById("div1");
element.appendChild(para);
</script>
例子解析:
这段代码创建新的<p> 元素:
如需向 <p> 元素添加文本,您必须首先创建文本节点。这段代码创建了一个文本节点:
然后您必须向 <p> 元素追加这个文本节点:
最后您必须向一个已有的元素追加这个新元素。
这段代码找到一个已有的元素:
以下代码在已存在的元素后添加新元素:
删除已有的 HTML 元素
这段代码向这个已有的元素追加新元素:
实例
<p id="p1">This is a paragraph.</p>
<p id="p2">This is another paragraph.</p>
</div>
<script>
var parent=document.getElementById("div1");
var child=document.getElementById("p1");
parent.removeChild(child);
</script>
实例解析
这个 HTML 文档含有拥有两个子节点(两个 <p> 元素)的 <div> 元素:
<p id="p1">This is a paragraph.</p>
<p id="p2">This is another paragraph.</p>
</div>
找到 id="div1" 的元素:
找到 id="p1" 的 <p> 元素:
从父元素中删除子元素:
![]() |
如果能够在不引用父元素的情况下删除某个元素,就太好了。 不过很遗憾。DOM 需要清楚您需要删除的元素,以及它的父元素。 |
---|
这是常用的解决方案:找到您希望删除的子元素,然后使用其 parentNode 属性来找到父元素:
child.parentNode.removeChild(child);
HTML DOM 教程
在我们的 JavaScript 教程的 HTML DOM 部分,您已经学到了:
- 如何改变 HTML 元素的内容 (innerHTML)
- 如何改变 HTML 元素的样式 (CSS)
- 如何对 HTML DOM 事件作出反应
- 如何添加或删除 HTML 元素
如果您希望学到更多有关使用 JavaScript 访问 HTML DOM 的知识,请访问我们完整的 HTML DOM 教程。
JavaScript HTML DOM 元素(节点)的更多相关文章
- JavaScript HTML DOM元素节点常用操作接口
在文档对象模型 (DOM) 中,每个节点都是一个对象.DOM 节点有三个重要的属性 : 1. nodeName : 节点的名称 2. nodeValue :节点的值 3. nodeType :节点的类 ...
- JavaScript之DOM创建节点
上几篇文章中我们罗列了一些获取HTML页面DOM对象的方法,当我们获取到了这些对象之后,下一步将对这些对象进行更改,在适当的时候进行对象各属性的修改就形成了我们平时看到的动态效果.具体js中可以修改D ...
- JavaScript HTML DOM 元素操作(节点)
在文档对象模型 (DOM) 中,每个节点都是一个对象.DOM 节点有三个重要的属性 : 1. nodeName : 节点的名称 2. nodeValue :节点的值 3. nodeType :节点 ...
- JavaScript 要点(十四)HTML DOM 元素(节点)
A.创建新的 HTML 元素 如需向 HTML DOM 添加新元素,必须首先创建该元素(元素节点),然后向一个已存在的元素追加该元素. <div id="div1"> ...
- JavaScript HTML DOM 元素(节点)
添加和删除节点(HTML 元素) 创建新的 HTML 元素 如需向 HTML DOM 添加新元素,您必须首先创建该元素(元素节点),然后向一个已存在的元素追加该元素. 例如:这段代码创建新的 < ...
- JavaScript获取DOM元素位置和尺寸大小
在一些复杂的页面中经常会用JavaScript处理一些DOM元素的动态效果,这种时候我们经常会用到一些元素位置和尺寸的计算,浏览器兼容性问题也是不可忽略的一部分,要想写出预想效果的JavaScri ...
- JavaScript的DOM操作(节点操作)
创建节点createElement()var node = document.createElement(“div”);没什么可说的,创建一个元素节点,但注意,这个节点不会被自动添加到文档(docum ...
- javascript中获取元素节点的文本
<div id="test"> <strong>i'm strong</strong> </div> 1.elementNode.i ...
- 【面试必备】javascript操作DOM元素
前言 时间过的真快,不知不觉就到年底了.问问自己,这一年你对自己的工作满意吗? 评价标准是什么呢?当然是马云的那两条准则了:钱给到了吗?干的爽吗?如果答案都是no,那么,你准备好跳槽了吗? 为了应对年 ...
随机推荐
- Android入门-Service-start,end,bind,unbind之间的区别
写贴一段别人关于service中start与bind,end与unbind的分析了: Service创建有两种方法: startService或者bindService 服务不能自己运行,需要通过调 ...
- Condition-线程通信更高效的方式
接近一周没更新<Java线程>专栏了,主要是这周工作上比较忙,生活上也比较忙,呵呵,进入正题,上一篇讲述了并发包下的Lock,Lock可以更好的解决线程同步问题,使之更面向对象,并且Rea ...
- bzoj2002
这道题学习了一种简洁的解决一些数据结构题的方法——分块法这道题方法很多,但分块写起来只有1kb左右,非常的简洁(但不是非常的高效)首先很容易思考到一种暴力的做法,从后往前推,很容易搞出每个点会弹几次弹 ...
- Solr -- Solr Facet 2
solr将以导航为目的的查询结果称为facet. 它并不会修改查询结果信息, 只是在查询结果上根据分类添加了count信息, 然后用户根据count信息做进一步的查询, 比如淘宝的查询列表中, 上面会 ...
- ♫【模式】自定义函数(self-defining function)
<JavaScript模式> /** * 如果创建了一个新函数并且将其分配给保存了另外函数的同一个变量,那么就以一个新函数覆盖旧函数. * 在某种程度上,回收旧函数指针以指向一个新函数.而 ...
- 游戏开发设计模式之子类沙盒模式(unity3d 示例实现)
积累提供所有操作(的实现)来定义子类的行为用一个最简单的例子来讲解这个模式玩家操纵的英雄也就是这个游戏的主角会有许多技能,我们想定义许多不同的技能,来让玩家使用.首 先我们定义一个skillBase类 ...
- Pick-up sticks - POJ 2653 (线段相交)
题目大意:有一个木棒,按照顺序摆放,求出去上面没有被别的木棍压着的木棍..... 分析:可以维护一个队列,如果木棍没有被压着就入队列,如果判断被压着,就让那个压着的出队列,最后把这个木棍放进队列, ...
- hdu1195 Open the Lock (DFS)
Problem Description Now an emergent task for you is to open a password lock. The password is consist ...
- C# WinForm 判断窗体控件是否修改过
本文转载:http://www.cnblogs.com/LinFx/archive/2011/12/23/2299895.html 1.自定义控件, 和接口 ) return IsModify(con ...
- 理解 Linux 网络栈(1):Linux 网络协议栈简单总结 图
http://www.cnblogs.com/sammyliu/p/5225623.html