appendChild,insertBefore,replaceChild,removeChild,cloneNode用法小结

1.appendChild()

appendChild()用于向childNodes列表的末尾添加一个节点。更新节点后，appendChild()返回新增的节点。

下面的parentNode代表父节点，newNode代表新节点，returnedNode代表appendChild返回的节点

var returnedNode = parentNode.appendChild(newNode);
console.log( returnedNode == newNode )  //true
console.log( returnedNode == parent.lastChild)  //true

如果传入到appendChild()中的newNode原本已经是文档的一部分了，结果会将该节点从原来的位置转移到新位置。因为任何DOM节点不能同时出现在文档的多个位置上。

例子如下：parentNode中的firstChild将会转移为lastChild

//假设parentNode有多个子节点
var returnedNode = parentNode.appendChild(parentNode.firstChild);
console.log( returnedNode == parentNode.lastChild )     //true
console.log( returnedNode == parentNode.firstChild )    //false

2.insertBefore()

insertBefore()接受2个参数，要插入的节点和作为参考的节点。。更新节点后，insertBefore()返回新插入的节点。

两个参数都是必填，不过第二个参数可以为null。

如果第二个参数是null，则insertBefore()实现的效果与appendChild()相同。

//插入后成为最后一个节点
var returnedNode = parentNode.insertBefore(newNode,null);
console.log( returnedNode ==  parentNode.lastChild );   //true//插入后成为第一个节点
var returnedNode = parentNode.insertBefore(newNode,parentNode.firstChild);
console.log( returnedNode ==  parentNode.firstChild );  //true//插入到最后一个节点前面
var returnedNode = parentNode.insertBefore(newNode,parentNode.lastChild);
console.log( returnedNode ==  parentNode.childNodes[parentNode.childNodes.length-2]);   //true
或者
console.log( returnedNode ==  parentNode.childNodes.item(parentNode.childNodes.length-2));  //true

3.replaceChild()

replaceChild()接受两个参数：要插入的节点和要替换的节点。并返回要替换的节点。

//替换第一个节点
var returnedNode = parentNode.replaceChild(newNode,parentNode.firstChild);

4.removeChild()

removeChild()接受一个参数：要移除的节点。并返回移除的节点。

//移除第一个节点
var returnedNode = parentNode.removeChild(parentNode.firstChild);

5.cloneNode()

cloneNode()为一个节点创建完全相同的副本。接受一个可选的布尔值参数，表示是否执行深复制。

当参数为true，则执行深复制，也就是复制节点及其整个子节点树；当参数为false，执行浅复制，只复制节点本身，不包含它的子节点树。

假设HTML如下：

<ul id='oul'><li>text1</li><li>text2</li><li>text3</li>
</ul>

深复制：

var oul = document.getElementById('oul');var deepList = oul.cloneNode(true);console.log(deepList.childNodes.length)     //7 或者 3（IE<9，IE9之前的版本不会为空白符创建节点）

浅复制：

var oul = document.getElementById('oul');var deepList = oul.cloneNode();console.log(deepList.childNodes.length)     //0

appendChild,insertBefore,replaceChild,removeChild,cloneNode用法小结相关推荐

JS DOM 编程复习笔记 -- replaceChild、cloneNode、removeChild（八）
今天我们继续来去复习DOM操作的三个API,分别为replaceChild.cloneNode.removeChild,替换节点.克隆节点.删除节点,下面一个个来看它们的语法以及使用案例. repla ...
TinyXML用法小结
TinyXML用法小结 1. 介绍 Tinyxml的官方网址:http://www.grinninglizard.com 官方介绍文档:http://www.grinninglizard.c ...
DOM节点深度克隆函数cloneNode()用法实例
本文实例讲述了DOM节点深度克隆函数cloneNode()用法.分享给大家供大家参考. <div id= "container" > <ul> <li ...
【前端 HTML+CSS+JavaScript(JS)】DOM练习-图片在DIV间移动的实现-removeChild cloneNode position append 上下对齐带注释/总结
作业要求: 效果: 总结: 1.让元素上下对齐的方法: ①让图片上下对齐用vertical-align:cender; ②让其他元素上下对齐设置line-height与height一样. 2.CSS中 ...
HTML DOM：replaceChild()和cloneNode()
replaceChild()基本用法 replaceChild()方法用新节点替换某个子节点. 这个新节点可以是文档中某个已经存在的节点,也可以是创建的新的节点. node.replaceChild( ...
oracle @spool,Oracle spool 用法小结
Oracle spool 用法小结转自:http://wallimn.javaeye.com/blog/472182 对于SPOOL 数据的SQL,最好要自己定义格式,以方便程序直接导入,SQL语句 ...
js push(),pop(),unshift(),shift()的用法小结
js中push(),pop(),unshift(),shift()的用法小结 1.push().pop()和unshift().shift() 这两组同为对数组的操作,并且会改变数组的本身的长度及内容 ...
C++ :: 的用法小结
原文:http://blog.csdn.net/whz_zb/article/details/6843369 :: 的用法小结: 用于将类内声明的静态数据成员在类外初始化: 用于将类内声明的函数成员在 ...
Java中getResourceAsStream的用法小结
2019独角兽企业重金招聘Python工程师标准>>> Java中getResourceAsStream的用法小结一.Java中的getResourceAsStream主要有以下三 ...

appendChild,insertBefore,replaceChild,removeChild,cloneNode用法小结

appendChild,insertBefore,replaceChild,removeChild,cloneNode用法小结相关推荐

最新文章

热门文章