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是在红色 ...
随机推荐
- Ubuntu svn 安装 Rabbitvcs
先添加源 sudo add-apt-repository ppa:rabbitvcs/ppa 必要的话在源清单里面也添加一下 sudo gedit /etc/apt/sources.list 内容是 ...
- SpringCloud番外篇-服务治理之Nacos
一.Nacos概述 Nacos是阿里巴巴开源的服务注册中心,官方文档:https://nacos.io/zh-cn/docs/what-is-nacos.html 从个人使用体验上看,nacos要比e ...
- .NET Core 3.1 编写混合 C++ 程序
前言 随着 .NET Core 3.1 的第二个预览版本发布,微软正式将 C++/CLI 移植到 .NET Core 上,从此可以使用 C++ 编写 .NET Core 的程序了. 由于目前仅有 MS ...
- 泛微e-cology OA系统远程代码执行漏洞及其复现
泛微e-cology OA系统远程代码执行漏洞及其复现 2019年9月19日,泛微e-cology OA系统自带BeanShell组件被爆出存在远程代码执行漏洞.攻击者通过调用BeanShell组件中 ...
- 【XSY2525】Maze 2017多校
Description 考虑一个 N×M 的网格,每个网格要么是空的,要么是障碍物.整个网格四周都是墙壁(即第1行和第n行,第1列和第m列都是墙壁),墙壁有且仅有两处开口,分别代表起点和终点.起点总是 ...
- 题解和总结——noip2019集训测试赛(一)贪吃蛇+字符串+都城
Problem A: 贪吃蛇 描述 Input Output Sample Input [样例输入1] 4 5 ##... ..1#@ 432#. ...#. [样例输出1] 4 [样例输入2] 4 ...
- Mybaits 源码解析 (十)----- 全网最详细,没有之一:Spring-Mybatis框架使用与源码解析
在前面几篇文章中我们主要分析了Mybatis的单独使用,在实际在常规项目开发中,大部分都会使用mybatis与Spring结合起来使用,毕竟现在不用Spring开发的项目实在太少了.本篇文章便来介绍下 ...
- Python文字转换语音,让你的文字会「说话」,抠脚大汉秒变撒娇萌妹
作者 | pk 哥 来源公众号 | Python知识圈(ID:PythonCircle) APP 也有文字转换为语音的功能,虽然听起来很别扭,但是基本能解决长辈们看不清文字或者眼睛疲劳,通过文字转换为 ...
- Python基本数据结构之集合
一道python面试的一个小问题,说怎么使用一行代码将一个列表里的重复元素,其实这里只要将列表转换成集合就可以了. 定义 集合跟我们学的列表有点像,也是可以存一堆数据,不过它有几个独特的特点,令其在整 ...
- Python 基础之re 模块
Python 基础之大话 re 在使用re模块中主要会用到一下几个方法: re.match() #从头匹配一个字符串 re.search() #浏览全部字符串,匹配第一个符合规则的字符串 re.fin ...