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. linux下载文件到本地

    使用XShell工具 1.首先虚拟机要联网 2.服务器要安装了rz,sz yum install lrzsz 运行rz,会将windows的文件传到linux服务器   运行sz filename,会 ...

  2. 深入JAVA虚拟机笔记-垃圾收集器与内存分配策略

    第三章:垃圾收集器与内存分配 问题:1.哪些内存需要回收 2.什么时候回收 3.怎么回收 回收方法区:

  3. 关系型数据的分布式处理系统：Cobar

    Cobar简介 Cobar是关系型数据的分布式处理系统,它可以在分布式的环境下像传统数据库一样为您提供海量数据服务. Github:https://github.com/alibaba/cobar 整 ...

  4. spring中@注解的相关解释

    @Component:@Controller:@Service:@Repository 在annotaion配置注解中用@Component来表示一个通用注释用于说明一个类是一个spring容器管理的 ...

  5. sed(seream editor)流编辑器

    sed:既然是流编辑器,自然只会是改变输入输出流的内容,对源文件并不进行丝毫修改,不信的话,你可以用cat sourcefille试试啊~ 另,如果你想将修改保存到源文件,可以用输入输出重定向啊~ s ...

  6. vue $attrs 父组件和孙子组件的传值，传函数

    上一篇我们说到provide/inject的依赖注入的传值方法,今天我们来说一下另一个父组件给孙子组件的传值方式$attrs 我们接着上一个例子继续来写 parent父组件 我们给child子组件穿了 ...

  7. 使用TPL取回Task中的运行结果的三种方式

    概念:TPL( Task Parallel Library) 任务并行库 使用Task类执行多线程操作要比直接使用自己手工创建Thread效率高很多. 默认情况下,TPL使用线程池中的线程执行Task ...

  8. 忘记mysql超户密码的解决方法

    本文章针对用yum安装的mariadb数据库,如果是tar包安装的mysql数据库,只是数据库命令的关闭启动方式不同而已. 方法一:[root@localhost ~]# killall -u mys ...

  9. 前端，用js根据一个对象，去除另个对象中重复的元素

    这里的应用场景是,两个div盛放待选项目和已选项目,如下图 <div class="col-xs-6 col-sm-6 col-md-6 col-lg-6"> < ...

  10. chroot 试用alpinelinux安装软件包的问题

    前边有说明使用chroot 体验alpinelinux,但是因为默认没有dns server,造成软件包无法下载 现象 问题原因 解决方法 copy host resolv.conf 到alpine ...