DOM操作二
1.创建节点
createElement(): 创建新的Element节点
var s = document.createElement('script');
createTextNode(): 创建Text节点
cloneNode(): 复制节点,给方法传递参数true能够递归地复制所有的后代节点,false只是执行一个潜复制
importNode(): 除了IE的其他浏览器。 如果给它传递另一个文档的一个节点,它将返回一个适合本文档插入的节点的副本。传递true作为第二个参数,该方法将诋毁地导入所有的后代节点
2.插入节点
appendChild(): 在需要插入的Element节点上调用的,它插入指定的节点使其成为那个节点的最后一个子节点
insertBefore():接受两个参数。第一个参数就是待插入的节点,第二个参数是已存在的节点,新节点将插入该节点的前面。该方法应该是在新节点的父节点上调用,方法的第二个参数必须是该父节点的子节点。
//将child节点插入到parent中,使其成为第n个子节点
function insertAt(parent,child,n){
if(n<0 || n>parent.childNodes.length) throw new Error("");
else if(n==parent.childNodes.length) parent.appendChild(child);
else parent.insertBefore(child,parent.childNodes[n]);
}
3.删除和替换节点
removeChild(): 删除节点,注意该方法不是在待删除的节点上调用,而是在其父节点上调用
n.parentNode.removeChild(n);
replaceChild():替换节点,第一个参数为新节点,第二个参数是需要代替的节点
n.parentNode.replaceChild(document.createTextNode("replace"),n);
DOM操作二的更多相关文章
- jQuery的dom操作(二)转
addClass() 向匹配的元素添加指定的类名. after() 在匹配的元素之后插入内容. append() 向匹配的元素内部追加内容. appendTo() 向匹配的元素内部追加内容. attr ...
- Jquery:Jquery中的DOM操作<二>
由于昨天晚上回来的晚,写的有点匆忙,所以昨天的学习笔记中出现了多处错误的地方,幸好有各位园友帮忙指出,在这里谢过各位了!今天继续学习关于Jquery中DOM的操作,其实是昨天随笔的延续,求围观!!! ...
- javascript的DOM操作(二)
<html> <title>学习DOM</title> <a id="wen">文本</a> <input nam ...
- DOM操作二三事
我突然想起了append(),但是我记不太清它是原生JS的还是jQuery封装的,貌似是JS的,咦?那它在jQuery里叫什么来着?哎呀!记不清了!确定append()是JS里的?不是jQuery里的 ...
- jQuery学习笔记(二)jQuery中DOM操作
目录 DOM操作分类 jQuery中的各种DOM操作 查找节点 创建节点 删除节点 复制节点 替换节点 包裹节点 属性操作 样式操作 对HTML.文本和值的操作 遍历节点 CSS-DOM操作 小结 本 ...
- JavaScript的BOM、DOM操作、节点以及表格(二)
BOM操作 一.什么是BOM BOM(Browser Object Model)即浏览器对象模型. BOM提供了独立于内容 而与浏览器窗口进行交互的对象: BOM由一系列相关的对象构成 ...
- 前端学习(二十三)DOM操作,事件(笔记)
javascript 组成部分 1.ECMAScript javascript的核心解释器 2.DOM Document Object Modle 文 ...
- jQuery笔记(二)jQuery中DOM操作
前言 本篇主要介绍DOM操作,在说DOM操作之前,首先我们应该熟悉DOM树,以一个例子为例来说明DOM树.首先看这段HTML代码.(本文后面的代码如果没有特别指出,都是针对下述HTML代码进行操作) ...
- javascript学习(二) DOM操作HTML
一:DOM操作HTML JavaScript能够改变页面中所有的HTML元素 JavaScript能够改变页面中所有的HTML属性 JavaScript能够改变页面中所有的CSS样式 JavaScri ...
随机推荐
- 【bzoj2989】数列 KD-tree+旋转坐标系
题目描述 给定一个长度为n的正整数数列a[i]. 定义2个位置的graze值为两者位置差与数值差的和,即graze(x,y)=|x-y|+|a[x]-a[y]|. 2种操作(k都是正整数): 1.Mo ...
- 刷题总结——spoj1812(后缀自动机+DP)
题目: A string is finite sequence of characters over a non-empty finite set Σ. In this problem, Σ is t ...
- Classloader中loadClass()方法和Class.forName()区别
Classloader中loadClass()方法和Class.forName()都能得到一个class对象,那这两者得到的class对象有什么区别呢 1.java类装载的过程 Java类装载有三个步 ...
- 使用Eclipse+axis2一步一步发布webservice
1.下载axis2相关软件http://axis.apache.org/axis2/java/core/download.html 2.Java环境配置:JAVA_HOME.JRE_HONE.PATH ...
- echarts 图表用例
参考博客:http://blog.csdn.net/verne_feng/article/details/51731653 http://echarts.baidu.com/echarts2/doc/ ...
- 乱码及restful
1.乱码的解决--通过过滤器来解决乱码:springmvc中提供CharacterEncodingFilter解决post乱码 <filter> <filter-name>Ch ...
- android studio AndroidManifest
一.目录结构 1. AndroidManifest.xml 它是一个清单文件,提供应用的基本信息 <?xml version="1.0" encoding="utf ...
- 2018 ICPC 沈阳网络预赛 Fantastic Graph (优先队列)
[传送门]https://nanti.jisuanke.com/t/31447 [题目大意]:有一个二分图,问能不能找到它的一个子图,使得这个子图中所有点的度数在区间[L,R]之内. [题解]首先我们 ...
- mysql主从库
http://wangwei007.blog.51cto.com/68019/965575 一.mysql主从的原理 1.Replication 线程 Mysql的 Replication 是一个异步 ...
- BZOJ——2096: [Poi2010]Pilots
http://www.lydsy.com/JudgeOnline/problem.php?id=2096 Time Limit: 30 Sec Memory Limit: 162 MBSubmit: ...