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. SpringCloud之Zuul配置问题

    当通过网关去调用服务的时候,尤其是服务里面配置了熔断,会发现拿不到熔断返回的信息 hystrix: command: default: execution: isolation: thread: ti ...

  2. SQlite 日期时间总结

    1. 时间串转时间戳,函数strftime,其参数1是固定'%s',参数2是待转换的时间串,参数3...是修饰符 (1)select strftime('%s','2004-01-01 02:34:5 ...

  3. Python基础入门总结

    Python基础入门教学 基础中的基础 列表.元组(tuple).字典.字符串 变量和引用 函数 python视频教程下载 基础中的基础 解释型语言和编译型语言差距: Python概述 解释器执行原理 ...

  4. Java 用双向循环链表实现 遍历

    package day2; /** * 构建双向循环链表,实现遍历功能 */public class DoubleLB { public static void main(String[] args) ...

  5. 文件I/O——文件打开函数(open/openat)

    一.open函数 1.函数原型:int open(const char *path,int oflag,.../* mode_t mode */); 2.头文件:#include <fcntl. ...

  6. Flex简记

    display的flex属性的使用对象分为1.容器即包含有元素的元素,2.项目,即某一个元素.就容器而言,flex可以实现换行(flex-wrap),改变容器内元素的排列方向(flex-directi ...

  7. TCP/IP协议第一卷第二章

    环回接口: 127全网段均被作为环回地址. 传给广播地址或多播地址的数据报复制一份给环回接口,然后传送到以太网上.这是因为广播传送和多播传送的定义包含自己本身. 任何传给该主机IP地址的数据均送到环回 ...

  8. 区块链之Hyperledger(超级账本)Fabric v1.0 的环境搭建(超详细教程)

    https://blog.csdn.net/so5418418/article/details/78355868

  9. 2684亿!阿里CTO张建锋:不是任何一朵云都撑得住双11

    2019天猫双11 成交额2684亿! "不是任何一朵云都能撑住这个流量.中国有两朵云,一朵是阿里云,一朵叫其他云."11月11日晚,阿里巴巴集团CTO张建锋表示,"阿里 ...

  10. python经典算法题:无重复字符的最长子串

    题目:无重复字符的最长子串. 给定一个字符串,请你找出其中不含有重复字符的 最长子串 的长度. 示例 1: 输入: "abcabcbb" 输出: 3 解释: 因为无重复字符的最长子 ...