insertBefore()
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()的更多相关文章
- 使用insertBefore实现insertAdjacentHTML()
Element.insertAdjacentHTML()方法由IE引入,并在HTML5中标准化,它将任意的HTML标记字符串插入到指定的元素“相邻”的位置. insertAdjacentHTML()有 ...
- mui,css3 querySelector,appendChild,style.display,insertBefore
<script> mui.init({ swipeBack:true //启用右滑关闭功能 }); window.addEventListener('toggle', function(e ...
- 【笔记】js parentsNode,lastChild,appendChild,insertBefore,nextSibling的意义及运用
这几天看书看到这几个属性做几个笔记 parentNode:顾名思义,就是获取某元素的父元素等同于jq的parent(). *注意一下,在调用parentNode 方法的时候 调用的对象必须是用ID 或 ...
- (转)appendChild()、insertBefore()是移动element节点!
原文地址 appendChild().insertBefore()是移动element节点,看书的时候注意过,也可以做一个简单的例子测试一下: <div id="div1"& ...
- jquery的insertBefore(),insertAfter(),after(),before()
insertBefore():a.insertBefore(b) a在前,b在后, a:是一个选择器,b:也是一个选择器 <!DOCTYPE html> <html> < ...
- js:插入节点appendChild insertBefore使用方法
首先 从定义来理解 这两个方法: appendChild() 方法:可向节点的子节点列表的末尾添加新的子节点.语法:appendChild(newchild) insertBefore() 方法:可在 ...
- insertBefore的兼容性问题
父级.insertBefore(新的元素,被插入的元素)方法 在指定的元素前面插入一个新元素 在ie下如果第二个参数的节点不存在,会报错 在其他浏览器下如果第二个参数不存在,则会以appendChil ...
- 创建删除元素appendChild,removeChild,createElement,insertBefore
<!DOCTYPE HTML> <html> <head> <meta http-equiv="Content-Type" content ...
- HTML DOM insertBefore() 方法 使用的时候发现一个问题,记录下
在W3C中是这样定义的 第二个参数是可先的,但是在谷歌浏览器和火狐浏览器中测试是会有bug的,第二个参数是必填的,否则会报错 感兴趣的可以测试 以下是我测试的结果: 谷歌浏览器:Uncaught ...
- 【笔记】after,before,insertAfter,insertBefore的作用
这几个方法的作用是插入外部节点,所谓外部插入节点就是我们平常在网页编程中手动添加代码到某一句语句的前面或后面,如图: 红色框的P是在蓝色框span的前面插入的外部节点,反过来说蓝色框的span是在红色 ...
随机推荐
- 设计模式C++描述----22.访问者(Visitor)模式
一. 访问者模式 定义:表示一个作用于某对象结构中的各元素的操作.它你可以在不改变各元素的类的前提下定义作用于这些元素的新操作. 结构如下: 二. 举例 假设有一项科学实验,是用来对比两种种子在不同环 ...
- OC-音乐播放器-锁屏处理
QQ音乐播放的过程中,锁屏状态下的效果如下: 也就是说,QQ音乐播放过程中,添加锁屏远程事件的监听. 本文只记录本人知道的小知识点,不提供完整的代码. 实现的原理: (1)获取锁屏歌曲信息中心:MPN ...
- 第四十章 POSIX条件变量
条件变量 当一个线程互斥地访问某个变量时,它可能发现在其它线程改变状态之前,它什么也做不了 例如一个线程访问队列时,发现队列为空,它只能等待,只到其它线程将一个节点添加到队列中.这种情况就需要用到条件 ...
- CSPS模拟99
555我原型笔录 T1 不会线段树维护单调栈被dalao们踩爆 T2 我要实现这样一个东西: 已知a,b,c,使a=a-b,b=b-c 结果我把代码弄成这样: b=b-c;a=a-b; 然后就被dal ...
- NOIP模拟 18
这次时间分配不合理,沉迷大模拟无法自拔 虽然A了但是根本就没给T3留时间555 T3如果有时间看看数据范围应该可以想到QJ掉20分的555 T1 引子 打这题的时候感觉自己在做图像处理.. 然后调了各 ...
- csps模拟测试92反思
连着挂了三天T1了. 89: SPFA$vst$数组没清空 90:调试的时候多删了一句代码 91:没开$long long$ 我真是废物. 希望以后不要犯SB错误了
- 记录一些html5和css3的一部分属性
html5 标签1 video:视频 属性: src:视频的url autoplay:视频在就绪后马上播放 controls:向用户显示控件2 audio:音频 属性类似于video3 属性:drag ...
- 奇怪的道路——状压DP
题目描述 小宇从历史书上了解到一个古老的文明.这个文明在各个方面高度发达,交通方面也不例外. 考古学家已经知道,这个文明在全盛时期有n座城市,编号为1..n.m条道路连接在这些城市之间,每条道路将两个 ...
- Java-selenium
public class chrometest { public static void main(String[] args) throws InterruptedException { Strin ...
- MachO文件详解--逆向开发
今天是逆向开发的第5天内容--MachO文件(Mac 和 iOS 平台可执行的文件),在逆向开发中是比较重要的,下面我们着重讲解一下MachO文件的基本内容和使用. 一.MachO概述 1. 概述 M ...