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. cmd 运行 java 文件

    在安装好jdk 并配置好环境变量的情况下 原因一:没有指定class文件的路径 例如HI是变异好的class文件,并且在d:/RJAZB里面 如果写成 Java HI  则会报错 正确做法 java ...

  2. Queue与Deque的区别

    前言 ​ 在研究java集合源码的时候,发现了一个很少用但是很有趣的点:Queue以及Deque,平常在写leetcode经常用LinkedList向上转型Deque作为栈或者队列使用,但是一直都不知 ...

  3. linux下又一次定位svn url方法

    版权声明:本文为博主原创文章.未经博主同意不得转载. https://blog.csdn.net/oudahe/article/details/34437661 linux下又一次定位svn url方 ...

  4. SpringBoot开发详解（五）--Controller接收参数以及参数校验

    原文链接:http://blog.csdn.net/qq_31001665 如有侵权,请联系博主删除博客,谢谢 Controller 中注解使用 接受参数的几种传输方式以及几种注解:  在上一篇中,我 ...

  5. MYSQL增量备份与恢复

    vim /etc/my.cnf在[mysqld]下添加max_binlog_size = 1024000 //二进制日志最大1M 要进行mysql的增量备份,首先要开启二进制日志功能方法一:在/etc ...

  6. Windows 屏幕保护程序

    { 创建一个win32 窗口项目,不是控制台的 把exe改为src文件 复制到windows目录下 ok }

  7. Delphi DBgrid 动态点击事件

    错误的写法: DBGrid1CellClick(DBGrid1.Columns[ DBGrid1.DataSource.DataSet.RecNo ]); //执行点击事件 正确的写法: DBGrid ...

  8. SpringBoot项目部署初体验【Docker】

    前言 一个微服务项目,小到几个模块,大到十几二十几个模块,每个模块都是单独的SpringBoot工程,这么多模块的部署,部署成本真的很高,而且每个服务的部署,都是手动部署,打成war或者jar ?,一 ...

  9. 半途而废的Java爬虫学习经历

    最近在面试,发现Java爬虫对于小数据量数据的爬取的应用还是比较广,抽空周末学习一手,留下学习笔记 Java网络爬虫 简单介绍 爬虫我相信大家都应该知道什么,有什么用,主要的用途就是通过程序自动的去获 ...

  10. 【基础】Linux软件安装方法

    linux中wget .apt-get.yum rpm区别 wget 类似于迅雷,是一种下载工具, 通过HTTP.HTTPS.FTP三个最常见的TCP/IP协议下载,并可以使用HTTP代理 名字是Wo ...