如果想要把节点放在某个特定的位置,而不是放在末尾,就可以使用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. 建立自己的Servlet--成功

    1--用记事本新建一个servlet程序,文件名为HelloWorld.java,文件内容如下: import java.io.*; import javax.servlet.*; import ja ...

  3. Influxdb简单实用操作

    新的infludb版本已经取消了页面的访问方式,只能使用客户端来查看数据 一.influxdb与传统数据库的比较 库.表等比较: influxDB 传统数据库中的概念 database 数据库 mea ...

  4. vue 之 .$mount()

    $mount():手动挂载 当Vue实例没有el属性时,则该实例尚没有挂载到某个dom中: 假如需要延迟挂载,可以在之后手动调用vm.$mount()方法来挂载.例如: <div id=&quo ...

  5. exit和return

    函数名: exit() 所在头文件:stdlib.h(如果是”VC6.0“的话头文件为:windows.h) 功 能: 关闭所有文件,终止正在执行的进程. exit(1)表示异常退出.这个1是返回给操 ...

  6. C高级第四次作业

    作业要求一 最简单的wordcount 具体要求:http://www.cnblogs.com/xinz/p/7426280.html 1.设计思路: 0.0版本设计思路: 第一步:读入用户想要操作的 ...

  7. git中的needs merge问题

    这个问题是在先“储藏”起来了,后面再调用出来出现的错误. 解决的方法就是通过git add    ,git commit -m  提交上去就可以了.

  8. MVC的好处 演示

    <!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title>& ...

  9. socket、tcp/ip协议、udp协议

    socket通常也称作"套接字",用于描述IP地址和端口,是一个通信链的句柄,应用程序通常通过"套接字"向网络发出请求或者应答网络请求. socket起源于Un ...

  10. FastAdmin 自己做的插件 SQL 有一个表没有生成成功

    群里有群友问: 给插件建的install.sql 里有三个表,为啥会出现安装成功后没有错误提示,只生成了两个表的情况..这可能会是什么...原因 第一感觉和 FastAdmin 没有关系. 没生成表, ...