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是在红色 ...
随机推荐
- 解开HTTPS的神秘面纱
在说HTTP前,一定要先介绍一下HTTP,这家伙应该不用过多说明了,大家每天都在用,每一次HTTP请求,都是一次TCP连接.遗憾的是,请求的内容在TCP报文中是明文传输的,任何人截取到请求都可以读取其 ...
- Spring Cloud alibaba网关 sentinel zuul 四 限流熔断
spring cloud alibaba 集成了 他内部开源的 Sentinel 熔断限流框架 Sentinel 介绍 官方网址 随着微服务的流行,服务和服务之间的稳定性变得越来越重要.Sentine ...
- 在虚拟机上的关于Apache(阿帕奇)(5)基于端口访问网站
这篇随笔是基于端口访问网站,和前面两篇文章基于ip和基于域名一起练习效果更好 接下来分别创建三个网站数据目录 输入命令: mkdir -p /home/wwwroot/{8001,8002,800 ...
- nginx篇最初级用法之nginx升级
在不破坏nginx应用程序和配置文件下时,升级nginx. 下载新版本的nginx对其进行编译 使用nginx -V参数获得当前版本和配置参数 nginx version: nginx/1.10.3b ...
- [考试反思]1017csp-s模拟测试77(lrd day1) :反抗
说在前面:强烈谴责AK神Mr_zkt没有丝毫素质RP-- 然而我也想没素质一次,但是我没机会AK一套除了B组题以外的题... 太菜了,没权力.人家AK了人家就是牛逼你没话说 达哥的题必须好好写反思. ...
- [考试反思]0929csp-s模拟测试55:消逝
菜得过分. 面对T1的大板子不知所措,然后T2的贪心不小心把排序语句删了... T1这种大模板啊...其实我是觉得我能打出来的,然后先用一个小时码了一个2k. 然后做T2想贪心就出来了.十分钟码完T3 ...
- DAY 5 搜索
搜索 开篇: mayan游戏(noip2011 day1 T3) 这道题就是个码量题,老师讲题时淡淡的说写完前两题就花一个半小时了,最后一题不快点打会调不出来,对于一个三个半小时就写两题的蒟蒻来说这. ...
- 曹工杂谈:为什么很少需要改Spring源码,因为扩展点太多了,说说Spring的后置处理器
前言 最近发了好几篇,都是覆盖框架源码,但是spring的代码,我是从没覆盖过,毕竟,如果方便扩展,没谁想去改源码,而spring就是不需要改源码的那个,真的是"对扩展开放,对修改关闭&qu ...
- 02-model设计
一.项目依赖包安装 1.安装Django(2.2.7) pip3 install django 2.安装DjangoRestFramework 因为DjangoRestFramework是基于Djan ...
- PyCharm使用正则替换python中的静态资源
python每次开发前台页面时,最无法避免的就是前台静态资源地址的替换了,手动替换成{% static 'web/.......' %}可想而知的痛苦,把正则替换的方式分享给朋友们,希望可以帮助到需要 ...