insertBefore()方法将把一个给定的节点插入到一个给定元素节点的给定子节点前面,他返回一个指向新增子节点的引用指针:

reference = element.insertBefore(newNode,targetNode);

如上所示,节点newNode将被插入元素节点element并出现在节点targetNode的前面。节点targetNode必须是element元素的一个子节点。如果targetNode节点未给出,newNode节点就将被追加为element元素最后一个子节点-----从效果看,这相当于调用appendChild()的方法。

insertBefore()方法通常与createElement()和createTargetNode()方法配合使用,以便把新创建的节点插入到文档树里。

在下例中,某文档有个id属性值是content的元素,这个元素又包含着一个id属性值是fineprint,我们将用createElement()方法创建一个新的文本段元素,再把新建元素插入到content元素所包括的fineprint元素的前面:

var container = document.getElement.ById("content");
var message = document.getElementById("fineprint");
var para = document.createElement("p");
container.insertBefore(para,message);

如果被插入的元素本身还有子节点,那些子节点也被插入到目标节点里面:

var container = document.getElementById("content");
var message = document.getElementById("fineprint");
var para = document.createElement("p");
var text = document.createTextNode("Here cones the fineprint");
para.appendChild(text);
container.insertBefore(para,message);

insertBefore()方法不仅可以用来插入新创建元素,还可以用来挪动文档中的现有节点。

在下例中,某个文档有一个id属相值是content的元素,在这个元素有包含一个id属性值是fineprint的元素,在这个文档的其他地方还有一个id属性值是headline的元素。在找这个元素后,最后一条语句把headline元素移动到content的元素所包含的fineprint元素的前面:

var container = document.getElementById("content");
var messge = document.getElementById("fineprint");
var announcement = document.getElementById("headline");
container.insertBefore(announcement,message);

注意,id属性值是headline的元素将先从文档书上面被移除,然后再被重新插入到新的位置,即content元素所包含的fineprint元素前面。

insertBefore()的更多相关文章

  1. 使用insertBefore实现insertAdjacentHTML()

    Element.insertAdjacentHTML()方法由IE引入,并在HTML5中标准化,它将任意的HTML标记字符串插入到指定的元素“相邻”的位置. insertAdjacentHTML()有 ...

  2. mui,css3 querySelector,appendChild,style.display,insertBefore

    <script> mui.init({ swipeBack:true //启用右滑关闭功能 }); window.addEventListener('toggle', function(e ...

  3. 【笔记】js parentsNode,lastChild,appendChild,insertBefore,nextSibling的意义及运用

    这几天看书看到这几个属性做几个笔记 parentNode:顾名思义,就是获取某元素的父元素等同于jq的parent(). *注意一下,在调用parentNode 方法的时候 调用的对象必须是用ID 或 ...

  4. (转)appendChild()、insertBefore()是移动element节点!

    原文地址 appendChild().insertBefore()是移动element节点,看书的时候注意过,也可以做一个简单的例子测试一下: <div id="div1"& ...

  5. jquery的insertBefore(),insertAfter(),after(),before()

    insertBefore():a.insertBefore(b) a在前,b在后, a:是一个选择器,b:也是一个选择器 <!DOCTYPE html> <html> < ...

  6. js:插入节点appendChild insertBefore使用方法

    首先 从定义来理解 这两个方法: appendChild() 方法:可向节点的子节点列表的末尾添加新的子节点.语法:appendChild(newchild) insertBefore() 方法:可在 ...

  7. insertBefore的兼容性问题

    父级.insertBefore(新的元素,被插入的元素)方法 在指定的元素前面插入一个新元素 在ie下如果第二个参数的节点不存在,会报错 在其他浏览器下如果第二个参数不存在,则会以appendChil ...

  8. 创建删除元素appendChild,removeChild,createElement,insertBefore

    <!DOCTYPE HTML> <html> <head> <meta http-equiv="Content-Type" content ...

  9. HTML DOM insertBefore() 方法 使用的时候发现一个问题,记录下

    在W3C中是这样定义的   第二个参数是可先的,但是在谷歌浏览器和火狐浏览器中测试是会有bug的,第二个参数是必填的,否则会报错 感兴趣的可以测试 以下是我测试的结果: 谷歌浏览器:Uncaught ...

  10. 【笔记】after,before,insertAfter,insertBefore的作用

    这几个方法的作用是插入外部节点,所谓外部插入节点就是我们平常在网页编程中手动添加代码到某一句语句的前面或后面,如图: 红色框的P是在蓝色框span的前面插入的外部节点,反过来说蓝色框的span是在红色 ...

随机推荐

  1. CSAPP:代码优化【矩阵运算】

    编程除了使程序在所有可能的情况下都正确工作,还需要考虑程序的运行效率,上一节主要介绍了关于读写的优化,本节将对运算的优化进行分析.读写优化 编写高效程序需要做到以下两点: 选择一组合适的算法和数据结构 ...

  2. 为啥不能#define private public了?

    今天在写一个单元测试的时候出现了如下编译错误: 以前用gtest为了测试业务代码里的private函数和变量,一直是在单元测试代码通过#define private public这样的trick达到测 ...

  3. 调试webpack

    调试webpack 1. 摘要 用过构建工具webpack的朋友应该都体会,面对其几百行的配置内容如大海一小舟,找不到边.看文档查百度,对其构建的生命周期看了又看.最终还是很茫然.原因很简单,构建配置 ...

  4. 前端技术之:如何在Vue中使用clipboard.js复制服务端数据

    第一步 创建点击对象页面元素,并绑定业务数据. <el-button type="text" size="mini" class="copy-b ...

  5. Web for pentester_writeup之File Upload篇

    Web for pentester_writeup之File Upload篇 File Upload(文件上传) Example 1 直接上传一句话木马,使用蚁剑连接 成功连接,获取网站根目录 Exa ...

  6. 学习笔记32_EF查询优化

    *如果有 var temp = from m in dbContext.Model1 where m.属性1 == value select m; foreach(var m1 in temp)//这 ...

  7. fatal: Authentication failed for 'http://git

    git pull 出现 fatal: Authentication failed for 'http://git... git config --system --unset credential.h ...

  8. c++中while(cin>>str)和ctrl z的相关问题探讨

    对于while (cin>>str)和ctrl z的问题,网上有以下解释: -------------------------------------------------------- ...

  9. C语言程序设计100例之(6):数字反转

    例6    数字反转 题目描述 给定一个整数,请将该数各个位上数字反转得到一个新数.新数也应满足整数的常见形式,即除非给定的原数为零,否则反转后得到的新数的最高位数字不应为零(参见样例2). 输入格式 ...

  10. Havok Physics 2012(2)

    目录 Havok Physics 2012 Chapter 2. Creating a Simulation 创建一个模拟世界 1. Creating Physics 2012 Objects Hav ...