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 插入子节 ...
随机推荐
- SVM用于线性回归
SVM用于线性回归 方法分析 在样本数据集()中,不是简单的离散值,而是连续值.如在线性回归中,预测房价.与线性回归类型,目标函数是正则平方误差函数: 在SVM回归算法中,目的是训练出超平面,采用作为 ...
- [Offer收割]编程练习赛50
题目3 : 末尾有最多0的乘积 时间限制:10000ms 单点时限:1000ms 内存限制:256MB 描述 给定N个正整数A1, A2, ... AN. 小Hi希望你能从中选出M个整数,使得它们的乘 ...
- 常用类--Date日期类,SimpleDateFormat日期格式类,Calendar日历类,Math数学工具类,Random随机数类
Date日期类 Date表示特定的时间,精确到毫秒; 构造方法: public Data() public Date(long date) 常用方法: public long getTime() pu ...
- 【转】Unity协程(Coroutine)原理深入剖析
Unity协程(Coroutine)原理深入剖析 By D.S.Qiu 尊重他人的劳动,支持原创,转载请注明出处:http.dsqiu.iteye.com 记得去年6月份刚开始实习的时候,当时要我写网 ...
- Linux Shell系列教程之(十)Shell for循环
本文是Linux Shell系列教程的第(十)篇,更多Linux Shell教程请看:Linux Shell系列教程 基本任何语言都有自己的循环语句,Shell当然也不例外,今天就为大家介绍下Shel ...
- vue.js源码学习分享(九)
/* */ var arrayKeys = Object.getOwnPropertyNames(arrayMethods);//获取arrayMethods的属性名称 /** * By defaul ...
- phpcms V9 安装黄页模块后,注册为普通会员并登录,点立即免费入驻企业库出现白板
解决步骤: 1. 将php.ini修改: display_errors = On 2. 再次尝试,显示出错误: Fatal error: require(): Failed opening requi ...
- Xcode 如何计算整个项目的代码行数
参考链接:https://www.cnblogs.com/sunfuyou/p/7921538.html 1.打开终端 2.cd 空格 将工程的文件夹拖到终端上,回车,此时进入到工程的路径 此时已经进 ...
- 对农行金e顺k令的一些猜测
手上有一个未激活的农行金e顺k令 开机后要求输入12位的激活码,随机输入多次,均告失败 花了点时间猜想k令的工作模式: 已知: k令无法联网,出厂后除了输入激活码的机会外,无法获取任何信息 k令内部有 ...
- Network | sk_buff
sk_buff结构可能是linux网络代码中最重要的数据结构,它表示接收或发送数据包的包头信息.它在中定义,并包含很多成员变量供网络代码中的各子系统使用. 这个结构被不同的网络层(MAC或者其他 ...