appendChild() , insertBefore()插入节点需注意的问题
来源:互联网 发布:你见过最恐怖的事 知乎 编辑:程序博客网 时间:2024/05/24 03:23
使用appendChild()和insertBefore()插入节点都会返回给插入的节点,
相似的操作方法还有 removeNode(node)删除一个节点,并返回该节;replaceNode(newNode,node)替换node节点,并返回该节点。这两种方法相对来说更容易使用一些。
//由于这两种方法操作的都是某个节点的子节点,所以必须现取得父节点,代码中 someNode 表示父节点//使用appendChild()方法插入节点var returnedNode = someNode.appendChild(newNode);alert(returnedNode == newNode) //true//使用insertBefore()方法插入节点var returnedNode = someNode.appendChild(newNode);alert(returnedNode == newNode) //true
值得注意的是,如果这两种方法插入的节点原本已经存在与文档树中,那么该节点将会被移动到新的位置,而不是被复制。
<div id="test"><div>adscasdjk</div> <div id="a">adscasdjk</div></div><script type="text/javascript">var t = document.getElementById("test");var a = document.getElementById('a');//var tt = a.cloneNode(true);t.appendChild(a);</script>在这段代码中,页面输出的结果和没有Javascript时是一样的,元素并没有被复制,由于元素本来就在最后一个位置,所以就和没有操作一样。如果把id为test的元素的两个子元素点换位置,就可以在firbug中看到这两个div已经被调换了位置。
如果我们希望把id为a的元素复制一个,然后添加到文档中,那么必须使被复制的元素现脱离文档流。这样被添加复制的节点被添加到文档中之后就不会影响到文档流中原本的节点。即我们可以把复制的元素放到文档的任何地方,而不影响被复制的元素。下面使用了cloneNode()方法,实现节点的深度复制,使用这种方法复制的节点会脱离文档流。当然,我不建议使用这种方法复制具有id属性的元素。因为在文档中id值是唯一的。
<div id="test"><div>adscasdjk</div> <div id="a">adscasdjk</div></div><script type="text/javascript">var t = document.getElementById("test");var a = document.getElementById('a');var tt = a.cloneNode(true);t.appendChild(tt);</script>
相似的操作方法还有 removeNode(node)删除一个节点,并返回该节;replaceNode(newNode,node)替换node节点,并返回该节点。这两种方法相对来说更容易使用一些。
1 0
- appendChild() , insertBefore()插入节点需注意的问题
- appendChild() , insertBefore()插入节点需注意的问题
- appendChild() , insertBefore()插入节点需注意的问题
- appendChild() , insertBefore()插入节点需注意的问题
- JS插入节点的方法appendChild、insertBefore
- js节点内部插入元素的方法appendChild() insertBefore()
- JS(JavaScript)插入节点的方法appendChild与insertBefore
- JS(JavaScript)插入节点的方法appendChild与insertBefore
- JS(JavaScript)插入节点的方法appendChild与insertBefore
- 初学js插入节点appendChild insertBefore使用方法
- 使用appendChild(),insertBefore()的一个小问题
- appendChild /insertBefore 的错误
- appendChild()和insertBefore()方法插入元素的区别
- JavaScript 插入节点insertBefore()
- 插入节点insertbefore()
- javascript 插入节点appendChild()
- 插入节点appendChild()
- 插入节点appendChild
- 关于Activity的4种launchMode
- HDU-5194-DZY Loves Balls(BestCoder Round # 35 )
- Android 开发环境安装
- 欢迎使用CSDN-markdown编辑器
- EXCEL VBA字符串替换
- appendChild() , insertBefore()插入节点需注意的问题
- Map.Entry接口源码简析
- 数据结构顺序表定义和实现
- python MRJob
- 类名.this
- Android的多语言实现
- SQL Server 2000 视图部分内容提要
- JetBrains WebStorm 注册码>
- How to enable cURL in PHP / XAMPP