关于insertBefore
insertBefore,看名字就是在某个元素前插入元素,但是其实它可以再文档任何元素强势插入。
insertBefore用法:
parent.insertBefore(newChild, refChild)
即该方法必须在你希望插入到前面的父元素上调用.该方法带有两个参数.前一个是你希望插入的元素,后一个是你希望插入到该元素的前面。
我们看几个例子。
有这样的html:
<div id="wrapper"> <p id="a">AAAAA</p> <p id="b">BBBBB</p> <p id="c">CCCCC</p> <p id="d">DDDDD</p> </div>
1)insertBefore第二个参数可以使null。
var newp1 = document.createElement('p'); newp1.innerHTML = 'insertBefore,第二个参数是null'; wrapper.insertBefore(newp1, null)
效果和appendChild一样。
2)通常用法
var newp3 = document.createElement('p'); newp3.innerHTML = 'insertBefore, 插到b前面' wrapper.insertBefore(newp3, b)
3)插到第一个元素之前,也就是插到最前面
var newp4 = document.createElement('p'); newp4.innerHTML = 'insertBefore, 插入到最前面' wrapper.insertBefore(newp4, wrapper.firstChild)
4)插入到最后一个元素之前
var newp5 = document.createElement('p'); newp5.innerHTML = 'insertBefore, 插入到最后元素的前面' wrapper.insertBefore(newp5, wrapper.lastChild)
哎。。。不对,怎么不是插到最后一个前面。。。。
我们把lastChild打印出来看一下
lastChild是个文本节点,所以其实插到最后一个前面了。。。
其实firstChild就是childNodes[0],而lastChild就是childNodes[childNodes.length-1]
childNodes在不同浏览器下可能表现不一致,有的只包括元素节点,IE好像是这样,有的还包括文本节点,所以在使用时需要判断一下nodeType是不是3(文本节点),或者1(元素节点)。
哎。。。怎么说着说着insertBefore说到childNodes了。。。。
关于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是在红色 ...
随机推荐
- Android设计模式系列--工厂方法模式
工厂方法模式,往往是设计模式初学者入门的模式,的确,有人称之为最为典型最具启发效果的模式.android中用到了太多的工厂类,其中有用工厂方法模式的,当然也有很多工厂并不是使用工厂方法模式的,只是工具 ...
- Linux时间同步方式记录
Linux时间同步 部署Hadoop集群,遇到各个linux服务器的时间不同步的问题,于是研究了一下linux的时间同步方式,特将同步方式,总结如下: A. 前提条件 a) 网络是连通 ...
- MySQL内存表的特性与使用介绍
国内私募机构九鼎控股打造APP,来就送 20元现金领取地址:http://jdb.jiudingcapital.com/phone.html内部邀请码:C8E245J (不写邀请码,没有现金送)国内私 ...
- tomcat 虚拟目录与显示目录中文件列表
虚拟目录: 该方法推荐使用,比较简单. 在%tomcat%\conf\Catalina\localhost(该目录可能需要手工创建)下新建一个文件abc.xml,注意文件名中的abc就表示虚拟目录的名 ...
- 用HTML5 Canvas 做擦除及扩散效果
2013年的时候曾经使用canvas实现了一个擦除效果的需求,即模拟用户在模糊的玻璃上擦除水雾看到清晰景色的交互效果.好在2012年的时候学习HTML5的时候研究过canvas了,所以在比较短的时间内 ...
- 23、从头学Android之ContentProvider .
http://blog.csdn.net/jiahui524/article/details/7016430 应用场景: 在Android官方指出的Android的数据存储方式总共有五种,分别是:Sh ...
- 【转】cocos2d-x 2.0版本 自适应屏幕分辨率
http://codingnow.cn/cocos2d-x/975.html 我使用的版本是cocos2d-2.0-x-2.0.4,cocos2dx-2.0版本对多分辨率适配提供了很好的支持,使用起来 ...
- 利用DBExportDoc V1.0 For MySQL自动生成数据库表结构文档
对于DBA或开发来说,如何规范化你的数据库表结构文档是灰常之重要的一件事情.但是当你的库,你的表排山倒海滴多的时候,你就会很头疼了. 推荐一款工具DBExportDoc V1.0 For MySQL( ...
- What Influences Method Call Performance in Java?--reference
reference from:https://www.voxxed.com/blog/2015/02/too-fast-too-megamorphic-what-influences-method-c ...
- 根据字符串计算UILabel尺寸
iOS开发中经常会遇到UILabel大小尺寸不固定的情况,需要根据文字内容变化,这时候就需要计算文字大小以自动改变UILabel的尺寸. iOS7之后计算尺寸只需要一个方法就可以: - (CGSize ...