添加和删除节点(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. 第三章 802.11MAC基础 ****需要深入理解

    1.mac所面临的挑战 射频链路品质     radio link   容易受到干扰    802.11采用肯定确认机制   所有传送出去的帧都必须得到响应        工作站发送请求帧    基站 ...

  2. 清除Jquery动画的队列

    当我们在写页面效果时,有时希望当鼠标放到某个元素上,这时会有动态的效果,当鼠标移出时效果会消失.但实际中,如果快速的用鼠标指向元素并移出,反复几次.即便鼠标不再指向这个元素,但这个元素会不停的重复着动 ...

  3. 【Luogu】P4208最小生成树计数(状压乱搞)

    题目链接 最小生成树有两个性质,两个性质都知道的话这题就变成码农题了. 1.无论最小生成树长什么样,所有权值的边的数量是不变的.比如我有棵最小生成树有两条权值为2的边四条权值为1的边,那这个图的所有最 ...

  4. 用JS去掉前后空格或中间空格大全

    1.  去掉字符串前后所有空格: -- js实现trim功能 //去除字符串前后所有空 function Trim(str) { return str.replace(/(^\s*)|(\s*$)/g ...

  5. 洛谷P3327 [SDOI2015]约数个数和 【莫比乌斯反演】

    题目 设d(x)为x的约数个数,给定N.M,求\(\sum_{i = 1}^{N} \sum_{j = 1}^{M} d(ij)\) 输入格式 输入文件包含多组测试数据.第一行,一个整数T,表示测试数 ...

  6. java8 函数式接口——Function/Predict/Supplier/Consumer

    Function 我们知道Java8的最大特性就是函数式接口.所有标注了@FunctionalInterface注解的接口都是函数式接口,具体来说,所有标注了该注解的接口都将能用在lambda表达式上 ...

  7. 【CF712D】Memory and Scores(概率,DP,前缀和)

    题意:AB两人玩一个游戏,两人玩t轮 每人每次随机且等概率从[-k,k]中取一个数字加到总得分中 得分高者赢 已知A B初始分别有a b分,问A取得胜利的概率是多少 (1 ≤ a, b ≤ 100,  ...

  8. net9:图片文件转换成二进制流存入SQL数据库,以及从数据库中读取二进制流输出文件

    原文发布时间为:2008-08-10 -- 来源于本人的百度文章 [由搬家工具导入] using System;using System.Data;using System.Configuration ...

  9. Object转json-常见问题总结

    Object转json-常见问题总结 1.Object中有Timestamp.Date等日期类型数据 http://blog.csdn.net/without0815/article/details/ ...

  10. 解决win2008下IIS7的HTTP500错误

    造成500错误常见原因有:ASP语法出错.ACCESS数据库连接语句出错.文件引用与包含路径出错.使用了服务器不支持的组件如FSO等.另外,对于win2008的IIS默认不显示详细出错信息的问题以下就 ...