appendChild()插入节点需注意的问题
第一点:首先appendChild插入节点时返回的值是插入的节点本身,另外必须要找到所要插入的父节点:
var returnNode = parentNode.appendChild(childNode);
console.log(returnNote===childNode);//true
第二点:appendChild所要插入的新节点如果存在于文档流中,那么此时并不会把心节点复制然后插入到这个父节点下,而是把这个新节点从源文档流中移动到所要插入的父节点下:
<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>
这样有js代码和没有js代码的表现是一样的,但是在fireBug下可以清楚地发现有id的div移动到了没有id的那个div前面去了;也即是id='a'的div只是移动到了父节点下而已。
<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>
解决的方法就是将所要插入的节点clone一下在插入到相应位置,这样就可以达到预期的效果了
appendChild()插入节点需注意的问题的更多相关文章
- JS中插入节点的方法appendChild和insertBefore的应用
1.appendChild() 方法:可以向节点的子节点列表的末尾添加新的子节点.比如:appendChild(newchild)括号里可以是创建的标签var newchild = document. ...
- js插入节点appendChild和insertBefore
首先 从定义来理解 这两个方法: appendChild() 方法:可向节点的子节点列表的末尾添加新的子节点.语法:appendChild(newchild) insertBefore() 方法:可在 ...
- JS(JavaScript)插入节点的方法appendChild与insertBefore
首先 从定义来理解 这两个方法: appendChild() 方法:可向节点的子节点列表的末尾添加新的子节点.语法:appendChild(newchild) insertBefore() 方法:可在 ...
- 插入节点appendChild()
http://www.imooc.com/code/1698 插入节点appendChild() 在指定节点的最后一个子节点列表之后添加一个新的子节点. 语法: appendChild(newnode ...
- JavaScript插入节点小结
JS原生API插入节点的方式大致有innerHTML.outerHTML.appendChild.insertBefore.insertAdjacentHTML.applyElement这6种. 这里 ...
- Query节点操作,jQuery插入节点,jQuery删除节点,jQuery Dom操作
一.创建节点 var box = $('<div>节点</div>'); //创建一个节点,或者var box = "<div>节点</div> ...
- jQuery节点操作,jQuery插入节点,jQuery删除节点,jQuery Dom操作
一.创建节点 1 var box = $('<div>节点</div>'); //创建一个节点,或者var box = "<div>节点</div& ...
- dom4j 间隔插入节点 处理复杂的xml文档
前几周跟着老师做了一个小项目,个人主要负责xml文档处理,处理过程还是比较复杂的.此外这篇文章并不是讲基本的dom4j读写xml文档, 所以阅读此文的前提是你已经有了dom4j或jdom等处理xml文 ...
- javascript之DOM编程设置节点插入节点
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...
随机推荐
- 优秀android开源项目与解决方案推荐
后来加上的,因为太强大了,android上百个可立即使用的开源库介绍:https://github.com/Trinea/android-open-project Android上的FTP服务器 S ...
- Cognos 增加全局类
Cognos使用版本10.1.1 由于我服务器装的是linux系统下的,所以window系统下的方法,提一下,但是没有实现过. 1.Linux系统下增加全局类 ●修改GlobalReportStyle ...
- [iOS基础控件 - 6.10.2] PickerView 自定义row内容 国家选择Demo
A.需求 1.自定义一个UIView和xib,包含国家名和国旗显示 2.学习row的重用 B.实现步骤 1.准备plist文件和国旗图片 2.创建模型 // // Flag.h // Co ...
- UML学习(二)-----类图
UML学习(二)-----类图 http://www.cnblogs.com/silent2012/archive/2011/09/07/2169946.html http://www.cnblogs ...
- npm package 装包匹配原则
经常看到package.json 里面有这样的devDependencies: "devDependencies": { "@angular/common": ...
- java foreach编辑讲解
foreach语句使用总结 foreach语句是java5的新特征之一,在遍历数组.集合方面,foreach为开发人员提供了极大的方便. foreach语句是for语句的特殊简化版本,但是foreac ...
- Codeforces Beta Round #85 (Div. 1 Only) B. Petya and Divisors 暴力
B. Petya and Divisors Time Limit: 20 Sec Memory Limit: 256 MB 题目连接 http://codeforces.com/contest/111 ...
- Lambda表达式实现有限状态机
实现状态机有多种模式,其中最灵活而强大的方式是通过迁移表来实现,该方式的缺点之一是需要编写大量小块代码去支持迁移表.而在C#3.0中,可以以一种非常优雅的方式实现. 除了有限状态机外,还有有限自动机, ...
- c# socket通信较完善方案
c#的socket通信应用.文件较多.附件为工程. core AbstractBytesWorker.cs 字节工作器(基类),用于用于同一不同功能的字节工作器 BinaryHand.c ...
- c# 自己制作一个简单的项目倒计时器
using System; using System.Collections.Generic; using System.ComponentModel; using System.Data; usin ...