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操作二的更多相关文章

  1. jQuery的dom操作(二)转

    addClass() 向匹配的元素添加指定的类名. after() 在匹配的元素之后插入内容. append() 向匹配的元素内部追加内容. appendTo() 向匹配的元素内部追加内容. attr ...

  2. Jquery:Jquery中的DOM操作<二>

    由于昨天晚上回来的晚,写的有点匆忙,所以昨天的学习笔记中出现了多处错误的地方,幸好有各位园友帮忙指出,在这里谢过各位了!今天继续学习关于Jquery中DOM的操作,其实是昨天随笔的延续,求围观!!! ...

  3. javascript的DOM操作(二)

    <html> <title>学习DOM</title> <a id="wen">文本</a> <input nam ...

  4. DOM操作二三事

    我突然想起了append(),但是我记不太清它是原生JS的还是jQuery封装的,貌似是JS的,咦?那它在jQuery里叫什么来着?哎呀!记不清了!确定append()是JS里的?不是jQuery里的 ...

  5. jQuery学习笔记(二)jQuery中DOM操作

    目录 DOM操作分类 jQuery中的各种DOM操作 查找节点 创建节点 删除节点 复制节点 替换节点 包裹节点 属性操作 样式操作 对HTML.文本和值的操作 遍历节点 CSS-DOM操作 小结 本 ...

  6. JavaScript的BOM、DOM操作、节点以及表格(二)

    BOM操作 一.什么是BOM BOM(Browser Object Model)即浏览器对象模型.     BOM提供了独立于内容 而与浏览器窗口进行交互的对象:     BOM由一系列相关的对象构成 ...

  7. 前端学习(二十三)DOM操作,事件(笔记)

    javascript 组成部分    1.ECMAScript        javascript的核心解释器 2.DOM        Document Object Modle         文 ...

  8. jQuery笔记(二)jQuery中DOM操作

    前言 本篇主要介绍DOM操作,在说DOM操作之前,首先我们应该熟悉DOM树,以一个例子为例来说明DOM树.首先看这段HTML代码.(本文后面的代码如果没有特别指出,都是针对下述HTML代码进行操作) ...

  9. javascript学习(二) DOM操作HTML

    一:DOM操作HTML JavaScript能够改变页面中所有的HTML元素 JavaScript能够改变页面中所有的HTML属性 JavaScript能够改变页面中所有的CSS样式 JavaScri ...

随机推荐

  1. Get 了滤镜、动画、AR 特效,速来炫出你的短视频开发特技!

    在滤镜美颜.搞怪特效.炫酷场景等各种新奇玩法驱动下,短视频开始让人上瘾. 12 月 3 日,七牛云联合八大短视频特效平台共同推出了中国短视频开发者创意大赛(China Short Video Cont ...

  2. 【bzoj4804】欧拉心算 欧拉函数

    题目描述 给出一个数字N 输入 第一行为一个正整数T,表示数据组数. 接下来T行为询问,每行包含一个正整数N. T<=5000,N<=10^7 输出 按读入顺序输出答案. 样例输入 1 1 ...

  3. 雅礼培训 Problem A 【线段树】

    题意 维护一段区间,支持求区间最大值,区间且,区间或 \(n,q<=2*10^5\) 题解 我们用线段树维护区间最大值 对于and和or运算, and实质就是强行把一些位改为0 or实质就是强行 ...

  4. java面试题之hashcode相等两个类一定相等吗?equals呢?相反呢?

    答:hashcode相等,两个类不一定相等,equals也不一定相等: 反过来,equals相等,hashcode一定相等

  5. mysql解压之后的安装

    远程连接报错(error:10061)看这篇:https://www.cnblogs.com/zipon/p/5877820.html 从5.6.20之后root会自动生成一个随机密码在/root/. ...

  6. Codevs 1021 玛丽卡==洛谷 P1186

    时间限制: 2 s 空间限制: 128000 KB  题目等级 : 大师 Master  题目描述 Description 麦克找了个新女朋友,玛丽卡对他非常恼火并伺机报复. 因为她和他们不住在同一个 ...

  7. 降雨量 BZOJ 1067

    降雨量 [问题描述] 我们常常会说这样的话:“X年是自Y年以来降雨量最多的”.它的含义是X年的降雨量不超过Y年,且对于任意Y<Z<X,Z年的降雨量严格小于X年.例如2002,2003,20 ...

  8. 【shell】shell编程(二)-运算符

    上篇我们学会了如何使用及定义变量.按照尿性,一般接下来就该学基本数据类型的运算了. 没错,本篇就仍是这么俗套的来讲讲这无聊但又必学的基本数据类型的运算了. 基本数据类型运算 操作符 符号 语义 描述 ...

  9. ctrl+c,ctrl+d,ctrl+z在linux程序中意义和区别

    原文: http://blog.csdn.net/sxhlovehmm/article/details/41318111 [侵删] ctrl+c和ctrl+z都是中断命令,但是他们的作用却不一样.   ...

  10. hdu 4849

    简单题,公式计算+最短路.注意点:注意1 取模,2 数组开到n*n+n. #include<iostream> #include<queue> using namespace ...