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 插入子节 ...
随机推荐
- xml报错“cvc-complex-type.2.4.c: The matching wildcard is strict, but no declaration can be found for element”
配置使用dubbo时,xml报错“cvc-complex-type.2.4.c: The matching wildcard is strict, but no declaration can be ...
- [git 学习篇]工作区和暂存区
1 工作区,就是目录/User/my./learngit 2 版本库 工作区有一个隐藏目录.git,这个不算工作区,而是Git的版本库. liuzhipeng@exdroid43:~/pad/pad- ...
- xml和pandas结合处理的一个小例子-待完善
#!/usr/bin/env python3 # -*- coding:utf-8 -*- import pandas import json import xml.etree.ElementTree ...
- hibernate缓存机制【转】
一.why(为什么要用Hibernate缓存?) Hibernate是一个持久层框架,经常访问物理数据库. 为了降低应用程序对物理数据源访问的频次,从而提高应用程序的运行性能. 缓存内的数据是对物理数 ...
- [LOJ#2255][BZOJ5017][Snoi2017]炸弹
[LOJ#2255][BZOJ5017][Snoi2017]炸弹 试题描述 在一条直线上有 N 个炸弹,每个炸弹的坐标是 Xi,爆炸半径是 Ri,当一个炸弹爆炸时,如果另一个炸弹所在位置 Xj 满足: ...
- Coloring Torus(Atcoder Grand Contest 030 C)
怎么外国都喜欢考脑筋急转弯…… 题意 输入 $k$,要求构造一个 $n\times n$ 的矩阵($n$ 自选),使得恰好用 $k$ 中颜色把每个点都染色,并且同一种颜色的格子周围 相邻的每种颜色数量 ...
- 【python接口自动化】获取根目录
将该方法放在根目录下面,在其他类中直接import 该方法. import os def getRootPath(): rootPath = os.path.dirname(os.path.abspa ...
- jrebel 激活
jrebel idea插件激活,亲测可用: 在jrebel server处,写上: http://139.199.89.239:1008/88414687-3b91-4286-89ba-2dc813b ...
- TinyXML2使用教程(转)
原文转自 http://blog.csdn.net/K346K346/article/details/48750417 1.TinyXML2概述 TinyXML2是simple.small.effic ...
- C/C++ XMPP/Jabber 客户端类库对比/点评 (转)
原文转自 http://blog.csdn.net/educast/article/details/31359835 1.gloox Ans. 老牌库,推荐 gloox是一个稳定功能完整的XMPP客户 ...