第一点:首先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()插入节点需注意的问题的更多相关文章

  1. JS中插入节点的方法appendChild和insertBefore的应用

    1.appendChild() 方法:可以向节点的子节点列表的末尾添加新的子节点.比如:appendChild(newchild)括号里可以是创建的标签var newchild = document. ...

  2. js插入节点appendChild和insertBefore

    首先 从定义来理解 这两个方法: appendChild() 方法:可向节点的子节点列表的末尾添加新的子节点.语法:appendChild(newchild) insertBefore() 方法:可在 ...

  3. JS(JavaScript)插入节点的方法appendChild与insertBefore

    首先 从定义来理解 这两个方法: appendChild() 方法:可向节点的子节点列表的末尾添加新的子节点.语法:appendChild(newchild) insertBefore() 方法:可在 ...

  4. 插入节点appendChild()

    http://www.imooc.com/code/1698 插入节点appendChild() 在指定节点的最后一个子节点列表之后添加一个新的子节点. 语法: appendChild(newnode ...

  5. JavaScript插入节点小结

    JS原生API插入节点的方式大致有innerHTML.outerHTML.appendChild.insertBefore.insertAdjacentHTML.applyElement这6种. 这里 ...

  6. Query节点操作,jQuery插入节点,jQuery删除节点,jQuery Dom操作

    一.创建节点 var box = $('<div>节点</div>'); //创建一个节点,或者var box = "<div>节点</div> ...

  7. jQuery节点操作,jQuery插入节点,jQuery删除节点,jQuery Dom操作

    一.创建节点 1 var box = $('<div>节点</div>'); //创建一个节点,或者var box = "<div>节点</div& ...

  8. dom4j 间隔插入节点 处理复杂的xml文档

    前几周跟着老师做了一个小项目,个人主要负责xml文档处理,处理过程还是比较复杂的.此外这篇文章并不是讲基本的dom4j读写xml文档, 所以阅读此文的前提是你已经有了dom4j或jdom等处理xml文 ...

  9. javascript之DOM编程设置节点插入节点

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

随机推荐

  1. 优秀android开源项目与解决方案推荐

    后来加上的,因为太强大了,android上百个可立即使用的开源库介绍:https://github.com/Trinea/android-open-project Android上的FTP服务器  S ...

  2. Cognos 增加全局类

    Cognos使用版本10.1.1 由于我服务器装的是linux系统下的,所以window系统下的方法,提一下,但是没有实现过. 1.Linux系统下增加全局类 ●修改GlobalReportStyle ...

  3. [iOS基础控件 - 6.10.2] PickerView 自定义row内容 国家选择Demo

    A.需求 1.自定义一个UIView和xib,包含国家名和国旗显示 2.学习row的重用   B.实现步骤 1.准备plist文件和国旗图片     2.创建模型 // // Flag.h // Co ...

  4. UML学习(二)-----类图

    UML学习(二)-----类图 http://www.cnblogs.com/silent2012/archive/2011/09/07/2169946.html http://www.cnblogs ...

  5. npm package 装包匹配原则

    经常看到package.json 里面有这样的devDependencies: "devDependencies": { "@angular/common": ...

  6. java foreach编辑讲解

    foreach语句使用总结 foreach语句是java5的新特征之一,在遍历数组.集合方面,foreach为开发人员提供了极大的方便. foreach语句是for语句的特殊简化版本,但是foreac ...

  7. 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 ...

  8. Lambda表达式实现有限状态机

    实现状态机有多种模式,其中最灵活而强大的方式是通过迁移表来实现,该方式的缺点之一是需要编写大量小块代码去支持迁移表.而在C#3.0中,可以以一种非常优雅的方式实现. 除了有限状态机外,还有有限自动机, ...

  9. c# socket通信较完善方案

    c#的socket通信应用.文件较多.附件为工程.  core   AbstractBytesWorker.cs    字节工作器(基类),用于用于同一不同功能的字节工作器  BinaryHand.c ...

  10. c# 自己制作一个简单的项目倒计时器

    using System; using System.Collections.Generic; using System.ComponentModel; using System.Data; usin ...