1. <SCRIPT LANGUAGE="JavaScript">
  2. window.onload=function(){
  3. var a =document.createElement("span");
  4. var b =document.createTextNode("cssrain");
  5. a.appendChild(b);
  6. document.body.appendChild(a); //默认添加在文档的最后。
  7. //如果我们想指定位置，那么得使用insertBefore()
  8. }
  9. </SCRIPT>
  10. <body>
  11. aaaaaaaaaaaaa
  12. <div>ccccccc</div>
  13. <div>bbbbbbbbb</div>
  14. </body>

DEMO2:insertBefore添加到指定位置

  1. <SCRIPT LANGUAGE="JavaScript">
  2. window.onload=function(){
  3. var a =document.createElement("span");
  4. var b =document.createTextNode("cssrain");
  5. a.appendChild(b);
  6. var mubiao = document.getElementById("b");
  7. mubiao.parentNode.insertBefore(a,mubiao);
  8. //插入到div b 前面。
  9. /*
  10. parentElement.insertBefore( newElement , targetElement );
  11. 从上面语法可以看出， 父元素， 新元素，目标元素 是 insertBefore使用的3要素。
  12. 其实我们可以不管 父元素， 因为 父元素我们 可以用 目标元素.parentNode 得到。
  13. 那么insertBefore就很好用了。只要给2个参数 ： 新元素 和目标元素。
  14. 那么有没有 insertAfter()方法呢？答案看下个例子。
  15. */
  16. }
  17. </SCRIPT>
  18. <body>
  19. aaaaaaaaaaaaa
  20. <div>ccccccc</div>
  21. <div id="b">bbbbbbbbb</div>
  22. </body>

DEMO3:

  1. <SCRIPT LANGUAGE="JavaScript">
  2. // DOM没有提供insertAfter()方法，所以我们只能自己写一个。
  3. function insertAfter(newElement,targetElement) {
  4. var parent = targetElement.parentNode;
  5. if (parent.lastChild == targetElement) {
  6. // 如果最后的节点是目标元素，则直接添加。因为默认是最后
  7. parent.appendChild(newElement);
  8. } else {
  9. parent.insertBefore(newElement,targetElement.nextSibling);
  10. //如果不是，则插入在目标元素的下一个兄弟节点 的前面。也就是目标元素的后面。
  11. }
  12. }
  13. window.onload=function(){
  14. var a =document.createElement("span");
  15. var b =document.createTextNode("cssrain");
  16. a.appendChild(b);
  17. var mubiao = document.getElementById("b");
  18. insertAfter(a,mubiao);
  19. }
  20. </SCRIPT>
  21. <body>
  22. aaaaaaaaaaaaa
  23. <div>ccccccc</div>
  24. <div id="b">bbbbbbbbb</div>
  25. <div>dddddd</div>
  26. </body>

javascript中的insertBefore方法的更多相关文章

  1. javascript中的splice方法介绍&示例

    javascript 中的 splice 方法很强大,它可以用于插入.删除或替换数组的元素. 下面来一一介绍! 删除:用于删除元素,两个参数,第一个参数(要删除第一项的位置),第二个参数(要删除的项数 ...

  2. javascript中的toString()方法

    javascript中的toString()方法,主要用于Array.Boolean.Date.Error.Function.Number等对象.下面是这些方法的一些解析和简单应用,做个纪律,以作备忘 ...

  3. JavaScript中的工厂方法、构造函数与class

    JavaScript中的工厂方法.构造函数与class 本文转载自:众成翻译 译者:谢于中 链接:http://www.zcfy.cc/article/1129 原文:https://medium.c ...

  4. javascript中的删除方法

    可能呢再开发的过程中呢使用的不是很多,但是碰上呢可以注意下 1.比如: var x = 10; delete x; console.log(x); 结果是多少,是10,不是异常也不是undefined ...

  5. JavaScript中样式，方法 函数的应用

    JavaScript中一个字母都不能错,编写的时候他不报错,也不提示,只有在执行的时候才会提示错误位置 . 一.样式 .waring {background-color:yellow } .highl ...

  6. javascript中的sort()方法

    现在在学习javascript中,发现sort()函数是有点奇怪的东西(可能是本人水平的问题-_-!),于是就在这里记录一下自己找到的东西吧.sort()这个方法的参数很奇怪,必须是函数,但也是可选参 ...

  7. Java和JavaScript中使用Json方法大全

    林炳文Evankaka原创作品. 转载请注明出处http://blog.csdn.net/evankaka   摘要:JSON(JavaScript Object Notation) 是一种轻量级的数 ...

  8. javascript中的继承方法

    从Javascript面向对象编程(二):构造函数的继承这里,可以看到详细的说明. 我只是将其中的例子做成html文件,便于调试罢了. 1. 构造函数绑定 <html> <head& ...

  9. JavaScript中数组Array方法详解

    ECMAScript 3在Array.prototype中定义了一些很有用的操作数组的函数,这意味着这些函数作为任何数组的方法都是可用的. 1.Array.join()方法 Array.join()方 ...

随机推荐

  1. 转 mysql查询结果输出到文件

    mysql查询结果输出到文件   mysql查询结果导出/输出/写入到文件 方法一:直接执行命令:mysql> select count(1) from table  into outfile ...

  2. mysql 5.7.20 动态sql 传入参数

    drop procedure test; delimiter ;; CREATE procedure test() -- 取动态sql的值 -- 目前只测试出,在 where 后面, 可以用 ?,类似 ...

  3. 使用python解析C代码

    我有一个巨大的C文件(~100k行),我需要能够解析.主要是我需要能够从其定义中获取有关每个结构的各个字段的详细信息(如结构中每个字段的字段名称和类型).是否有一个好的(开源,我可以在我的代码中使用) ...

  4. 7G

  5. 从Airbnb的发展历程和网易云的大起大落看IT行业创新（第5周课后作业）

    我想先根据个人看法回答“创新是什么?”这个空泛的问题.创新是面对当下的资源条件限制创造出能够满足动态需求或解决动态发展中的问题的新策略.这种实用化定义在大部分邻域都勉强能让定义者自圆其说,对于IT行业 ...

  6. byte为什么要与0xff

    面对带正负号的数,会采用符号扩展,如果原值是正数,则高位补上0:如果原值是负数,高位补1.二进制是计算技术中广泛采用的一种数制.二进制数据是用0和1两个数码来表示的数.当前的计算机系统使用的基本上是二 ...

  7. NetCore利用CsvHelper解析支付宝对账单

    支付宝账单是zip压缩文件流,里面包含了两个.csv文件. 1.请求支付宝账单下载链接,获取到zip文件流. var httpClient = _clientFactory.CreateClient( ...

  8. Schema约束与DTD约束

    现将Schema约束与DTD约束实现的一个实例截图出来: 1.DTD 1.1 DTD文件 1.2 DTD实现 2.Schema 2.1 Schema约束 2.2 Schema实现

  9. http核心模块 node

    ttp超文本传输协议* 协议至少双方 -> http双方!! * 客户端(浏览器) -> 服务器 BS - 原生应用(QQ) -> 服务器 CS * 就是数据如何传输 * 特点: * ...

  10. vue element-ui NavMenu错位问题

    原因:子菜单全部打开后太长超过100% 解决方法:设置只能点击打开当前的菜单