DOM拷贝一个节点并插入页面
2014-03-19 21:53
204 查看
javascript的cloneNode方法可以拷贝一个节点;方法:1、找到要拷贝的节点;2、利用cloneNode方法进行拷贝该节点;3、找到该节点的父节点;4、拷贝该节点;javascript示例:
html文件:
来自为知笔记(Wiz)
DOM.addEvent(window,'load',function(){ DOM.log.header('Clone and Move a Node'); var fireFoxLi = document.getElementById('safari'); var firefoxLiClone = fireFoxLi.cloneNode(true); var unorderedList = fireFoxLi.parentNode; //下免得代码通过 document.getElementById('safari');方法取得并吧该节点赋值给firefoxLi变量后; //你得到的只是该节点的应用,并没有获得该节点的副本; unorderedList.appendChild(fireFoxLi); unorderedList.appendChild(document.createElement('BR')); unorderedList.appendChild(firefoxLiClone);//这句话添加了新的节点 });
html文件:
This is my HTML page. <br> <div id='firefox' ></div> <hr/> <div> <ul> <li id='firefoxListItem' title="firefox"> <a href="#" title="get Firefox" id="firefox">Firefox 2.0</a> </li> <li> <a href="#" title="getMicrsoft Inter" id='msie'>ie11</a> </li> <li> <a href="#" title="check out safari" id='safari'>safari</a> </li> <li> <a href="#" title="getOpera" id='Opera'>Opera</a> </li> </ul> </div>效果:
来自为知笔记(Wiz)
相关文章推荐
- 如何将普通字符串转化为dom节点插入页面
- DOM插入一个节点--插入列表的末尾
- 关于一个常被大家遗忘的方法解决频繁操作 dom节点引起页面回流
- javascript实现把一个节点插入到另一个节点之后
- 【DOM】(1)通过document获取页面节点的三个属性(nodeName、nodeType、nodeValue)
- 不刷新页面jQuery模糊搜索,第一种实现---动态删除、插入节点
- dom复制cloneNode节点与插入节点appendChild()
- 如何在wordpress任何一个页面调用“插入图片”按钮,实现上传图片功能
- proxy 利用get拦截,实现一个生成各种DOM节点的通用函数dom。
- JavaScript之jQuery-3 jQuery操作DOM(查询、样式操作、遍历节点、创建插入删除、替换、复制)
- JS实现的DOM插入节点操作示例
- JS构建页面的DOM节点结构
- 4、JQuery——DOM节点删除、复制和拷贝
- 在IE下监控页面内存资源和dom节点(sIEve软件使用简介)
- 用头插、尾插、按顺序插入创建一个不带头节点的链表,栈的基本操作
- DOM节点的插入
- C语言:【单链表】在无头单链表的一个非头节点前插入一个节点
- 如何写一个发微博的页面(包括插入图片,插入表情,插入话题,插入Location) (一)
- 【算法之链表(三)】单链表中,在仅允许使用一个指针的情况下,在指定的节点前面插入以及删除一个节点
- 编程实现一个单链表节点的插入