js 节点操作
添加和删除节点(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 节点操作的更多相关文章
- js节点操作实例
写了一个简单的小例子来引用js实例 1. 初步节点操作: 2.兼容性节点操作: 3.节点的类型,名字: 4.使用setAttribute设置属性 5.节点复制操作: 6.删除和替换节点 如有错误,还望 ...
- js节点操作
在看<javascript高级程序设计>,看到节点操作这一块,觉得我只知道用appendChild(),太肤浅了,记录下学到的东西. 每个节点都有一个 parentNode 属性,该属性指 ...
- JS节点操作(JS原生+JQuery)
JavaScript与JQuery节点操作 节点关系与类型 任何HTML元素,都有nodeType属性.值有1~12,常用的有: 1.元素节点 2.文本节点 8.注释节点 9.document节点 ...
- 原生JS节点操作
获取子节点 1. children 不是标准的dom属性,但是几乎被所有浏览器支持.获取子元素的元素节点(只包括元素节点) 注意:在IE中,children包含注释节点. 2. childNodes ...
- js 节点 document html css 表单节点操作
js 节点 document html css 表单节点操作 节点操作:访问.属性.创建 (1)节点的访问:firstChild.lastChild.childNodes.parentChild(父子 ...
- JS Dom节点操作demo!
通过黑马课程的学习,在这里分享一个js Dom中节点操作的小练习 需求:使用js创建一个4*3的表格table. onload = function(){ function c(tagName){ r ...
- 原生JS和jQuery中基本的节点操作
js中节点操作**document.createElement()**用来生成网页元素节点,参数为元素的标签名: **document.createTextNode()**用来生成文本节点,参数为所要 ...
- JS DOM操作(创建、遍历、获取、操作、删除节点)
创建节点 <!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="u ...
- js教程系列32 :javascript-DOM节点操作
1 DOM节点操作 1.1 创建节点 createElement() var createDiv = document.createElement("div"); 1.2 插入子节 ...
随机推荐
- 聊聊、Docker 安装
- Linux问题故障定位
CPU 针对应用程序,通常关注的是内核CPU调度器功能和性能. 线程的状态分析主要是分析线程的时间用在什么地方,而线程状态的分类一般分为: a. on-CPU:执行中,执行中的时间通常又分为用户态时间 ...
- NSUserDefaults 简介
NSUserDefaults适合存储轻量级的本地数据,一些简单的数据(NSString类型的)例如密码,网址等,NSUserDefaults肯定是首选,但是如果我们自定义了一个对象,对象保存的是一些信 ...
- 周赛Problem 1021: 分蛋糕(埃拉托斯特尼筛法)
Problem 1021: 分蛋糕 Time Limits: 1000 MS Memory Limits: 65536 KB 64-bit interger IO format: %lld ...
- HDU-1853 Cyclic Tour
最小权值环覆盖问题:用几个环把所有点覆盖,求所选取的边最小的权值之和. 拆点思想+求最小转求最大+KM算法 #include <cstdlib> #include <cstdio&g ...
- 刷题总结——Cut the Sequence(POJ 3017 dp+单调队列+set)
题目: Description Given an integer sequence { an } of length N, you are to cut the sequence into sever ...
- [USACO Section 2.3] Cow Pedigrees (动态规划)
题目链接 Solution 我DP太菜啦... 考虑到一棵二叉树是由根节点以及左儿子和右儿子构成. 所以答案其实就是 左儿子方案数*右儿子方案数 . 状态定义: \(f[i][j]\) 代表深度为 \ ...
- 事件获取目标 currentTarget target srcElement三者之间的区别和联系
currentTarget 指的是触发事件的当前对象,可以是冒泡和捕获的对象,不一定是点击或者鼠标移入等事件的直接触发对象.可以是他的父元素等. target 指的是事件触发的直接对象.IE有兼容 ...
- hdu 3320 计算几何(三维图形几何变换)
openGL Time Limit: 2000/1000 MS (Java/Others) Memory Limit: 32768/32768 K (Java/Others)Total Subm ...
- MySQL 几种调式分析利器
目录 pstack gdb strace perf pstack 获取堆栈信息 问题线程的定位 负载较低 mysql_pid=4522 pstack $mysql_pid>pstack.info ...