如果想要把节点放在某个特定的位置,而不是放在末尾,就可以使用insertBefore(a,b)
参数a:要插入的节点
参数b:作为参照的节点.

 var oDiv = document.getElementById("guoDiv");
var oSpan = document.createElement("span");
oSpan.innerHTML = "4";
var returnNode = oDiv.insertBefore(oSpan, null); //插入到最后
oSpan = document.createElement("span");
oSpan.innerHTML = "5";
returnNode = oDiv.insertBefore(oSpan, oDiv.firstChild); //插入到第一个元素的前面
oSpan = document.createElement("span");
oSpan.innerHTML = "6";
returnNode = oDiv.insertBefore(oSpan,oDiv.lastChild);//插入到最后一个子元素的前面
 <div id="guoDiv">
<span>1</span>
<span>2</span>
<span>3</span>
</div>

javascript节点操作insertBefor()的更多相关文章

  1. JavaScript 节点操作Dom属性和方法(转)

    JavaScript 节点操作Dom属性和方法   一些常用的dom属性和方法,列出来作为手册用. 属性:   1.Attributes 存储节点的属性列表(只读)   2.childNodes 存储 ...

  2. JavaScript -- 节点操作, 事件触发, 表单伸缩

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

  3. 【转】JavaScript 节点操作 以及DOMDocument属性和方法

    最近发现DOMDocument对象很重要,还有XMLHTTP也很重要 注意大小写一定不能弄错. 属性: 1Attributes 存储节点的属性列表(只读) 2childNodes 存储节点的子节点列表 ...

  4. javascript 节点操作拷贝节点cloneNode()

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

  5. javascript节点操作移出节点removeChild()

    removeChild(a)是用来删除文档中的已有元素 参数a:要移出的节点 <div id="guoDiv"> <span>1</span> ...

  6. javascript节点操作replaceChild()

    replaceChild(a,b)是用来替换文档中的已有元素的 参数a:要插入的节点, 参数b:要替换的节点 var oDiv = document.getElementById("guoD ...

  7. javascript节点操作appendChild()

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

  8. JS节点操作(JS原生+JQuery)

    JavaScript与JQuery节点操作   节点关系与类型 任何HTML元素,都有nodeType属性.值有1~12,常用的有: 1.元素节点 2.文本节点 8.注释节点 9.document节点 ...

  9. 前端JavaScript之DOM节点操作

    1.HTML DOM是啥 Document Object Model:定义了访问和操作HTML文档的标准方法,把HTML文档呈现为带有元素,属性和文本的树状结构 2.解析过程 HTML加载完毕,渲染引 ...

随机推荐

  1. localforage 对不同浏览器 使用不同的缓存策略 , 大大提高了性能 ,IndexedDB,WebSQL 和 localStorage 三种存储模式

    支持回调的异步 API: 支持 IndexedDB,WebSQL 和 localStorage 三种存储模式(自动为你加载最佳的驱动程序): 支持 BLOB 和任意类型的数据,让您可以存储图片,文件等 ...

  2. mysql 聚合函数

    1.sum 用法 有这种类型的数据: id date user_id result 1 2015-05-04 1 win 2 2015-05-06 1 loss 3 2015-05-09 2 loss ...

  3. Python中字典的基本操作

    字典(Dictionary)是一映射类型(Key-value):字典是可变的,可存储任意类型对象 字典的定义用大括号{ },每个值用 ”,“ 逗号隔开,key和value使用 ”:“ 冒号分隔 字典的 ...

  4. Thrift之双向通讯

    在实际应用中,却经常会有客户端建立连接后,等待服务端数据的长连接模式,也可以称为双向连接.一.双连接,服务端与客户端都开ThriftServer如果网络环境可控,可以让服务端与客户端互相访问,你可以给 ...

  5. tensorflow中 tf.add_to_collection、 tf.get_collection 和 tf.add_n函数

    tf.add_to_collection(name, value)  用来把一个value放入名称是'name'的集合,组成一个列表; tf.get_collection(key, scope=Non ...

  6. 怎么在windows7下搭建服务器

    怎么在windows7系统安装IIS 图文教程 http://jingyan.baidu.com/article/1e5468f92f6e05484961b703.html 以下本人为列:第一步:先按 ...

  7. HOG+SVM+INRIAPerson数据集代码

    #include <iostream> #include <opencv2/core/core.hpp> #include <opencv2/highgui/highgu ...

  8. iTween的用法总结

    Unity3D插件-iTween的基本用法 本文提供全流程,中文翻译.Chinar坚持将简单的生活方式,带给世人!(拥有更好的阅读体验 -- 高分辨率用户请根据需求调整网页缩放比例) 1 Introd ...

  9. 《DSP using MATLAB》Problem 4.16

    代码: %% ------------------------------------------------------------------------ %% Output Info about ...

  10. 迭代器Iterator的底层实现原理

    第一步:没有接口的迭代器简单实现原理 package com.bjsxt.xiaofei; /** * 迭代器底层原理 * 方法: * hasNext() * next() * remove() * ...