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. docker swarm创建swarm集群

    三台linux主机 manager:192.168.100.151 work1:192.168.100.156 work2:192.168.100.157 manager docker swarm i ...

  2. docker--image的获取

    image有几种获取方式: 1.Docker官方提供了一种文件格式:Dockerfile,通过这种格式的文件,我们可以定义一个image,然后通过Dockerfile我们可以构建(build)一个im ...

  3. http(python)

    1.client 1) httpie http -f POST example.org hello=World http POST http://192.168.200.251:55101/Api/C ...

  4. P4151 [WC2011]最大XOR和路径 线性基

    题目传送门 题意:给出一幅无向图,求1到n的所有路径中最大异或和,一条边可以被重复经过. 思路: 参考了大佬的博客 #pragma GCC optimize (2) #pragma G++ optim ...

  5. vue子组件获取父组件方法

    注:以下代码未使用esLint语法检查 父组件: <template> <div class="wrapper"> <cp_action @paren ...

  6. Mina---系统学习

    1.为何使用Mina? java提供的BIO.NIO使用的复杂性等原因,导致Mina框架的诞生: 2.什么时候使用Mina? 易于使用 高并发的用户量 被证明的系统: Mina已被全球数以万计的应用使 ...

  7. 多媒体查询 @media 报错

    You may not @extend an outer selector from within @media.You may only @extend selectors within the s ...

  8. springCloud数据

    DROP DATABASE IF EXISTS springcloud_db01;CREATE DATABASE springcloud_db01 CHARACTER SET utf8;USE spr ...

  9. CSS3 @media 查询（制作响应式布局）

    这里简单说明一下@media 查询. 详细说明文档:http://www.runoob.com/cssref/css3-pr-mediaquery.html 使用 @media 查询,你可以针对不同的 ...

  10. HDU 4866 Shooting 题解：主席树

    这题的主要的坑点就是他给你的射击目标有重合的部分,如果你向这些重合的部分射击的话要考虑两种情况: 射击目标数量 ≥ 重合数量 : 全加上 射击目标数量 ≤ 重合数量 : 只加距离*射击目标数量 然而这 ...