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. 执行sudo apt-get update报错

    1.在官网源https://mirrors.ustc.edu.cn/repogen/下载对应版本最新的源,比如我是16.04版本的ubuntu,对应下载的是这个 2.下载sources.list完成之 ...

  2. 推荐几个顶级的IT技术公众号，坐稳了！

    提升自我的路很多,学习是其中最为捷径的一条.丰富的知识提升的不仅仅是你的阅历,更能彰显你的气质,正如古人云:"文质彬彬是君子." 今天为大家整理了10个公众号,分别为多领域,多角度 ...

  3. mysql 5.7.20 从frm文件中得到建表语句 (使用 mysql-utilities)

    系统环境  centos 7.2    mysql社区版 5.7.20 mysql-utilities 根据官网的说法,截止到2018年5月30日,实用工具的一些功能在Shell的路线图中,鼓励用户迁 ...

  4. [轉]关于CR0.WP

    关于CR0.WP 我们知道CR0的WP位可以关闭内核写保护.他和页表的R/W位有关.Intel手册中的描述绕来绕去似乎一直没有说到重点. When the processor is in superv ...

  5. ERROR 1290 (HY000): Unknown error 1290

    如有需要可以加我Q群[308742428]大家一起讨论技术,提供有偿服务. 后面会不定时为大家更新文章,敬请期待. 喜欢的朋友可以关注下. 记录一次在连接数据库报的一个错误信息: 原因是MySQL正使 ...

  6. javafx将数据库内容输出到tableview表格

    一 .创建Fxml文件,用Javafx Scene Builder 编辑页面,创建tableview(表格)和tablecolum(表格中的列),并为其设置fxid: 二.生成fxml文件的控制类: ...

  7. 解决码云未配置公钥问题——fatal: Could not read from remote repository.

    使用码云,键入“git push -u origin master” ,遇到如下问题: fatal: Could not read from remote repository.(致命:不能读远端仓库 ...

  8. Angular 4 变更检测机制 ChangeDetectorRef 使用方法

    1.在angular 2中,回调函数的返回结果,不会自动更新视图层的显示,可以用 ChangeDetectorRef 来驱动angular更新视图. import {ChangeDetectorRef ...

  9. 【记录】VScode快捷键大全

    记住快捷键能够提高工作效率 Ctrl+Shift+P,F1 展示全局命令面板 Ctrl+P 快速打开最近打开的文件 Ctrl+Shift+N 打开新的编辑器窗口 Ctrl+Shift+W 关闭编辑器 ...

  10. Coin Slider

    题目描述 You are playing a coin puzzle. The rule of this puzzle is as follows: There are N coins on a ta ...