appendChild、removeChild、insertBefore、createElement、cloneNode的区别;
2017-06-18 20:37
597 查看
html元素:
1. createElement:动态创建元素节点;
2. appendChild:给元素添加一个子元素;
添加新元素前样式:
第一个
第二个
第三个
添加新元素后样式:
第一个
第二个
第三个
我是新添加的
3. removeChild:只能在父级下进行操作,删除子元素;
删除元素前样式:
第一个
第二个
第三个
删除元素后样式:
第一个
第三个
4. insertBefore:在指定的元素前插入新元素;父元素.insertBefore(新添加的元素,指定的元素);当指定的元素为null时,插入成为最后一个元素;
插入元素前:
第一个
第二个
第三个
插入元素后:
第一个
我是新添加的
第二个
第三个
cloneNode():克隆;不会复制添加到DOM节点中的属性,只复制特性、子节点;
cloneNode(true):深度克隆,克隆元素本身和他的子元素;
cloneNode(flase):只克隆元素本身,连里边的文本都不复制;
<div id="box"> <ul id="ul"> <li>第一个</li> <li id="one">第二个</li> <li>第三个</li> </ul> <p>我是第二个子节点</p> </div>
1. createElement:动态创建元素节点;
2. appendChild:给元素添加一个子元素;
添加新元素前样式:
第一个
第二个
第三个
添加新元素后样式:
第一个
第二个
第三个
我是新添加的
var item = document.createElement("li"); var text = document.createTextNode("我是新添加的"); item.appendChild(text); var one = document.getElementById("ul"); one.appendChild(item) 添加新元素后样式:
3. removeChild:只能在父级下进行操作,删除子元素;
删除元素前样式:
第一个
第二个
第三个
删除元素后样式:
第一个
第三个
var one = document.getElementById("ul"); var Li = document.getElementById("one"); one.removeChild(Li)
4. insertBefore:在指定的元素前插入新元素;父元素.insertBefore(新添加的元素,指定的元素);当指定的元素为null时,插入成为最后一个元素;
插入元素前:
第一个
第二个
第三个
插入元素后:
第一个
我是新添加的
第二个
第三个
var oUl = document.getElementById("ul"); var one = document.getElementById("one"); var oLi = document.createElement("li"); var text = document.createTextNode("我是新添加的"); oLi.appendChild(text); oUl.insertBefore(oLi,one);
cloneNode():克隆;不会复制添加到DOM节点中的属性,只复制特性、子节点;
cloneNode(true):深度克隆,克隆元素本身和他的子元素;
cloneNode(flase):只克隆元素本身,连里边的文本都不复制;
var oBox = document.getElementById("box"); var btn = oBox.cloneNode(true); //var btn = oBox.cloneNode(false); document.body.appendChild(btn);
相关文章推荐
- [js高手之路] dom常用API【appendChild,insertBefore,removeChild,replaceChild,cloneNode】详解与应用
- [js高手之路] dom常用API【appendChild,insertBefore,removeChild,replaceChild,cloneNode】详解与应用
- [js高手之路] dom常用API【appendChild,insertBefore,removeChild,replaceChild,cloneNode】详解与应用
- appendChild() 或 insertBefore()使用与区别介绍
- jscript中appendChild和cloneNode的区别(原创,转载请声明)
- 【JS--DOM-节点操作2】--createElement()、appendChild()、insertBefore()、自定义的insertAfter()
- document.createElement()用法中appendChild()、 insertBefore()的区别
- appendChild()和insertBefore()方法插入元素的区别
- getAttribute,appendChild,removeChild,replaceChild,insertBefore 自定义函数
- appendChild() 或 insertBefore()使用与区别介绍
- createElement、appendChild、removeChild等方法的应用
- DOM-childNodes,parentNode,className,createElement,insertBefore,removeChild
- 关于createElement、appendChild和insertBefore的用法
- JavaScript之appendChild、insertBefore和insertAfter
- appendChild 与 insertBefore
- JavaScript之appendChild、insertBefore和insertAfter使用说明
- JS(JavaScript)插入节点的方法appendChild与insertBefore
- JavaScript之appendChild、insertBefore和insertAfter
- JavaScript之appendChild、insertBefore和insertAfter
- createElement和appendChild创建元素