js的appendChild()方法 :在一个元素内部追加一个子节点.

js的insertBefore()方法:在一个元素内部指定的子节点之前插入子节点.

很明显,appendChild()方法只需要一个条件就可以了,那就是父元素.

而后者则需要两个条件,一个是父元素,一个是要在父元素哪个子节点前插入.

下面是两种情况的例子对比:

var oDiv=document.getElementById('div1');
var oNew=document.createElement('div');
oDiv.appendChild(oNew);
var oDiv=document.getElementById('div2');
var oChild=oDiv.getElementById('div3');
var oNew=document.createElement('div');
oDiv.insertBefore(oNew,oChild);//先写新创建的DIV,后写子节点

javascript insertBefore 和 appendChild的更多相关文章

  1. javascript中document.appendChild和document.body.appendChild的问题

    在IE7中 var conentDiv = document.createElement("div"); document .body .appendChild(conentDiv ...

  2. insertBefore(),appendChild()创建添加列表实例

    定义: insertBefore() 方法在您指定的已有子节点之前插入新的子节点. 语法: 父级.insertBefore(新的子节点,指定的已有子节点) 实例: <input id=" ...

  3. JavaScript中的appendChild()方法

    appendChild()方法是向节点添加最后一个子节点.也可以使用此方法从一个元素向另一个元素移动元素. 案例一:向节点添加最后一个子节点 <!DOCTYPE html> <htm ...

  4. javascript节点操作appendChild()

    cloneNode(a)方法接受一个布尔值参数,表示是否深拷贝 true:表示执行深拷贝,复制本节点以及整个子节点树. false:浅拷贝.只复制节点本身. 复制后返回的节点副本属于文档所有,但是并没 ...

  5. 使用insertBefore实现insertAdjacentHTML()

    Element.insertAdjacentHTML()方法由IE引入,并在HTML5中标准化,它将任意的HTML标记字符串插入到指定的元素“相邻”的位置. insertAdjacentHTML()有 ...

  6. javascript --- javascript与DOM

    javascript与DOM: 我们来个例子,一个HTML里包含一段文本和一个无序的列表. <p id="intro">My first paragraph...< ...

  7. 读javascript高级程序设计10-DOM

    一.节点关系 元素的childNodes属性来表示其所有子节点,它是一个NodeList对象,会随着DOM结构的变化动态变化. hasChildNodes():是否有子节点. var headline ...

  8. JavaScript 闯关记

    DOM(文档对象模型)是针对 HTML 和 XML 文档的一个 API.DOM 描绘了一个层次化的节点树,允许开发人员添加.移除和修改页面的某一部分. 节点层次 DOM 可以将任何 HTML 或 XM ...

  9. JavaScript高级程序设计22.pdf

    操作节点 appendChild()用于向childNodes列表末尾添加一个节点,appendChild()返回新增的节点 var returnedNode=someNode.appendChild ...

随机推荐

  1. The Famous Clock

    描述 Mr. B, Mr. G and Mr. M are now in Warsaw, Poland, for the 2012’s ACM-ICPC World Finals Contest. T ...

  2. Android(java)学习笔记74:Java线程池

    线程池: 1)程序启动一个新线程成本是比较高的,因为它涉及到要与操作系统进行交互.而使用线程池可以很好的提高性能,尤其是当程序中要创建大量生存期很短的线程时,更应该考虑使用线程池. 2)线程池里的每一 ...

  3. CAML query for Group by count and data

    CAML query for Group by count and data Company Category Product Name Microsoft Developer Visual Stud ...

  4. fancybox的使用

    fancybox,个人没有深入了解,只是为了工作需要,做的一些界面,主要是用的AJAX功能. 首先,需要下载fancybox的js文件以及CSS文件(可能用不到) 其次,在页面中引入 <scri ...

  5. Umbraco入门(一)--在VS中安装Umbraco

    在VS中安装Umbraco 由于Vs中自己集成的IIS,所以在安装Umbraco是不用再想以前那么麻烦,需要设置IIS等等…… 使用VS的NuGet程序包管理器   创建一个用空的ASP Web应用程 ...

  6. 关于Windows下如何查看端口占用和杀掉进程

    更详细博客参见: http://www.cnblogs.com/chenwenbiao/archive/2012/06/24/2559954.html 或可参考:http://www.cnblogs. ...

  7. SQL 行转列

    ---1.最简单的行转列/* 问题:假设有张学生成绩表(tb)如下:姓名 课程 分数张三 语文 74张三 数学 83张三 物理 93李四 语文 74李四 数学 84李四 物理 94 想变成(得到如下结 ...

  8. Android重力感应开发

    http://blog.csdn.net/mad1989/article/details/20848181 一.手机中常用的传感器 在Android2.3 gingerbread系统中,google提 ...

  9. .net chart(图表)控件的使用-System.Windows.Forms.DataVisualization.dll

    这个案例指在介绍微软这套免费又功能强大的图表控件Microsoft Chart Controls for Microsoft .NET Framework 3.5,通过它,可让您的项目及报表,轻松套用 ...

  10. 拿到内存中dom元素的最后样式进行修改obj下的currentStyle方法

    在用dom操作在对页面中的<style></style>里的样式进行操作时,发现时无效的,我觉得是因为页面DOM解析时此标签的样式内容才会被读到内存中,因此JS操作时取不到此标 ...