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 插入子节 ...
随机推荐
- Policy-Based Reinforcement Learning
Policy-based Approach policy-based 强化学习通常是要学习一个actor, actor可以用\(\pi_\theta (S)\) 来确定.如果我们用actor来玩游戏, ...
- SVM用于线性回归
SVM用于线性回归 方法分析 在样本数据集()中,不是简单的离散值,而是连续值.如在线性回归中,预测房价.与线性回归类型,目标函数是正则平方误差函数: 在SVM回归算法中,目的是训练出超平面,采用作为 ...
- 【java基础 17】集合中各实现类的性能分析
大致的再回顾一下java集合框架的基本情况 一.各Set实现类的性能分析 1.1,HashSet用于添加.查询 HashSet和TreeSet是Set的两个典型实现,HashSet的性能总是比Tree ...
- 九度oj 题目1349:数字在排序数组中出现的次数
题目描述: 统计一个数字在排序数组中出现的次数. 输入: 每个测试案例包括两行: 第一行有1个整数n,表示数组的大小.1<=n <= 10^6. 第二行有n个整数,表示数组元素,每个元素均 ...
- 【Luogu】P3211XOR和路径(高斯消元)
题目链接 唉我个ZZ…… 首先考虑到异或是可以每一位分开算的 好的以后再碰见位运算题我一定先往按位开车上想 然后设f[i]为从i点出发到终点是1的概率 高斯消元解方程组即可. #include< ...
- 给shell添加颜色
编辑/etc/baserc 添加 TERM=xterm-color; export TERM alias ls='ls -G' alias ll='ls -lG' 给vim添加颜色 编辑/usr/sh ...
- Codeforces 899D Shovel Sale
题目大意 给定正整数 $n$($2\le n\le 10^9$). 考虑无序整数对 $(x, y)$($1\le x,y\le n, x\ne y$). 求满足 「$x+y$ 结尾连续的 9 最多」的 ...
- [暑假集训--数位dp]LightOj1032 Fast Bit Calculations
A bit is a binary digit, taking a logical value of either 1 or 0 (also referred to as "true&quo ...
- ApplicationContext,WebApplicationContext
servletContext 是web应用程序的大环境,用于存储整个web应用程序级别的对象. ApplicationContext,WebApplicationContext 是Spring的Bea ...
- 最新版浏览器报错net::ERR_INSECURE_RESPONSE原因
访问的网址与接口请求的域名不一致,新版的chrome浏览器出于安全的考虑会将请求进行拦截,并报错net::ERR_INSECURE_RESPONSE