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. 一网打尽OkHttp中的缓存问题

    看到很多小伙伴对OkHttp的缓存问题并不是十分了解,于是打算来说说这个问题.用好OkHttp中提供的缓存,可以帮助我们更好的使用Retrofit.Picasso等配合OkHttp使用的框架.OK,废 ...

  2. 为Google Reader守夜。。。

    Google的阅读器快要关闭了... 立刻截图留恋呢,以后就没机会了. 唉,真是令人惋惜. 虽然我接触Google Reader还不到一年,但是我已经习惯当连上WiFi时马上更新一下手机上的gRead ...

  3. Oracle 经典语法(一)

    员工表 emp Name     Type         Nullable Default Comments -------- ------------ -------- ------- ----- ...

  4. 两个UIView添加同一个手势只有最后一个有用

    首先这个思路是不对的,因为每一个Gesture Recognizer关联一个View,但是一个View可以关联多个Gesture Recognizer,因为一个View可能还能响应多种触控操作方式.当 ...

  5. [改善Java代码]equals应该考虑null值的情景

    建议46: equals应该考虑null值情景 继续上一建议的问题,我们解决了覆写equals的自反性问题,是不是就很完美了呢?再把main方法重构一下: public class Client { ...

  6. [设计模式]<<设计模式之禅>>模板方法模式

    1 辉煌工程——制造悍马 周三,9:00,我刚刚坐到位置上,打开电脑准备开始干活. “小三,小三,叫一下其他同事,到会议室开会”,老大跑过来吼,带着坏笑.还没等大家坐稳,老大就开讲了:“告诉大家一个好 ...

  7. 关于FastStone Capture输入中文出现乱码.

    关于FastStone Capture 中输入中文出现乱码. 根据我的使用,公司用的生产机是英文操作系统,这个时候用FSCapture输入中文就是乱码.英文是正常的. 自己的机器是中文的.输入中文和英 ...

  8. 创建触发器在表中播入数据时ID自动增长

    ),age )) create or replace trigger gger_tt before insert on ttt for each row when (new.id is null) b ...

  9. linux信息查找

    问题: 1. 当使用一台linux机器的时候,常常需要确认当前所用操作系统的版本信息,内核信息等, 操作系统的版本信息可以通过以下命令完成,比如:lsb_release -a:cat /etc/iss ...

  10. 【转】web常见安全问题以及测试方法

    web安全是我们测试组一直以来作为和性能测试并驾齐驱的两个重点.开发的过程中还需要着重注意,该转义的地方转义:该屏蔽的地方屏蔽,该过滤的地方过滤等等.年底又到了,势必又有大批的发号抽奖之类的活动开发. ...