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. 大文件读取方法(C#)

    之前都是用StreamReader.ReadLine方法逐行读取文件,自从.NET4有了File.ReadLines这一利器,就再也不用为大文件发愁了. File.ReadLines在整个文件读取到内 ...

  2. NODE编程(三)--构建Node Web程序1

    一.HTTP服务器的基本知识 1.Node如何向开发者呈现HTTP请求 Node中的http模块提供了HTTP服务器和客户端接口: var http = require('http'); 创建HTTP ...

  3. 邮件工具类--EmailUtil

    /* Copyright Notice ===================================================* * This file contains propri ...

  4. linux命令行操作快捷键

    在shell命令终端中,Ctrl+n相当于方向向下的方向键,Ctrl+p相当于方向向上的方向键. 在命令终端中通过它们或者方向键可以实现对历史命令的快速查找.这也是快速输入命令的技巧. 在命令终端中可 ...

  5. 【杨氏矩阵+勾长公式】POJ 2279 Mr. Young's Picture Permutations

    Description Mr. Young wishes to take a picture of his class. The students will stand in rows with ea ...

  6. IE升级代码时邮件内容

    TypeErrorUnable to set property 'value' of undefined or null reference. 但是可以进入添加页面,填完信息后,submit后跳转至 ...

  7. HttpClient(4.3.5) - HTTP Header

    An HTTP message can contain a number of headers describing properties of the message such as the con ...

  8. django 学习-3 模板变量

    1.vim learn/home.html <!DOCTYPE html><html><head>        <title>{{title}}< ...

  9. 判断DataReader中是否有指定列

    取出的DataReader如果在读取过程中报没有列的错误可以用这个方法. //调用该方法判断datareader中是否有指定列 public static bool readerExists(IDat ...

  10. javascript笔记—— 构造函数

    出处:http://www.cnblogs.com/RicCC/archive/2008/02/15/JavaScript-Object-Model-Execution-Model.html 数据类型 ...