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

创建新的 HTML 元素

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

实例

<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>

 

例子解释:

这段代码创建新的 <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 元素,您必须首先获得该元素的父元素:

<div id="div1">
<p id="p1">这是一个段落。</p>
<p id="p2">这是另一个段落。</p>
</div> <script>
var parent=document.getElementById("div1");
var child=document.getElementById("p1");
parent.removeChild(child);
</script>

  

  

  

  

 

js 节点操作的更多相关文章

  1. js节点操作实例

    写了一个简单的小例子来引用js实例 1. 初步节点操作: 2.兼容性节点操作: 3.节点的类型,名字: 4.使用setAttribute设置属性 5.节点复制操作: 6.删除和替换节点 如有错误,还望 ...

  2. js节点操作

    在看<javascript高级程序设计>,看到节点操作这一块,觉得我只知道用appendChild(),太肤浅了,记录下学到的东西. 每个节点都有一个 parentNode 属性,该属性指 ...

  3. JS节点操作(JS原生+JQuery)

    JavaScript与JQuery节点操作   节点关系与类型 任何HTML元素,都有nodeType属性.值有1~12,常用的有: 1.元素节点 2.文本节点 8.注释节点 9.document节点 ...

  4. 原生JS节点操作

    获取子节点 1. children 不是标准的dom属性,但是几乎被所有浏览器支持.获取子元素的元素节点(只包括元素节点) 注意:在IE中,children包含注释节点. 2. childNodes ...

  5. js 节点 document html css 表单节点操作

    js 节点 document html css 表单节点操作 节点操作:访问.属性.创建 (1)节点的访问:firstChild.lastChild.childNodes.parentChild(父子 ...

  6. JS Dom节点操作demo!

    通过黑马课程的学习,在这里分享一个js Dom中节点操作的小练习 需求:使用js创建一个4*3的表格table. onload = function(){ function c(tagName){ r ...

  7. 原生JS和jQuery中基本的节点操作

    js中节点操作**document.createElement()**用来生成网页元素节点,参数为元素的标签名: **document.createTextNode()**用来生成文本节点,参数为所要 ...

  8. JS DOM操作(创建、遍历、获取、操作、删除节点)

    创建节点 <!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="u ...

  9. js教程系列32 :javascript-DOM节点操作

    1 DOM节点操作 1.1 创建节点 createElement() var createDiv = document.createElement("div"); 1.2 插入子节 ...

随机推荐

  1. [git 学习篇] 提交文件

    http://www.liaoxuefeng.com/wiki/0013739516305929606dd18361248578c67b8067c8c017b000/0013743256916071d ...

  2. TOJ4537: n阶行列式

    4537: n阶行列式  Time Limit(Common/Java):1000MS/3000MS     Memory Limit:65536KByteTotal Submit: 28       ...

  3. Python3 的异常处理

    Python3 的异常处理,在官方文档的 tutorial 中有说明. 这里把常用的异常处理方法都列出来,方便平时查找. 捕获异常基类 Python3 要求我们的异常必须继承 Exception 类. ...

  4. Welcome-to-Swift-03字符串和字符(Strings and Characters)

    String是例如“hello, world“”,“海贼王” 这样的有序的Character(字符)类型的值的集合,通过String类型来表示. Swift 的String和Character类型提供 ...

  5. Python之实时调度任务

    过了年就开始面临毕业了,毕业季是幸福的,但也是紧迫的.2月已过就开始着手策划毕业论文了,一直到现在,论文基本完成了,感觉过去的一个半月的时间,对自己过去2年在实验室所学又温习了一遍.书到用时方恨少,在 ...

  6. 用Javascript实现图片的缓慢缩放效果

    <body> <!--页面布局:一张图片两个按钮--> <div style = "width:400px;margin:0 auto"> &l ...

  7. iOS-CALayer && CAAnimation

    一.CALayer 1.CALayer CALayer属于QuartzCore.framework框架,从Xcode5起我们不必要手动导入这个库. CALayer我们可以简单理解为一个层.当我们绘制的 ...

  8. no main manifest attribute, in demo-1.0.jar

    今天想打包一个jar到Linux上运行,发现使用java -jar demo-1.0.jar 运行报错: no main manifest attribute, in demo-1.0.jar 解决方 ...

  9. C语言扩展题

    1.使用cmake来创建c语言工程 2.使用gcc来编译源代码 3.下载redis,并且编译运行redis(注:redis目前是c语言编写的,而且是主要是linux平台,在windows平台编译比较麻 ...

  10. 【Codevs1993】草地排水(最大流,Dinic)

    题意:在农夫约翰的农场上,每逢下雨,Bessie最喜欢的三叶草地就积聚了一潭水.这意味着草地被水淹没了,并且小草要继续生长还要花相当长一段时间.因此,农夫约翰修建了一套排水系统来使贝茜的草地免除被大水 ...