原生js--insertAdjacentHTML
insertAdjacentHTML是IE浏览器提供向DOM中插入html字符串的方法,字符串会自动生成在DOM树中。
其调用方式为elem.insertAdjacentHTML( position, htmlStr )
elem 向哪个DOM的标签出插入字符串
position 有四个选项 "beforeBegin" "afterEnd" "afterBegin" "beforeEnd"分别指在elem的开始标签之前、结束标签之后、开始标签之后、结束标签之前插入htmlStr
htmlStr 字符串(不是DOM元素)
以下是在《javascript权威指南》中摘抄的,重新封装并重命名了该功能的Insert对象。并同时解决insertAdjacentHTML的浏览器兼容性问题
/**
* 在开始或结束标签的前后插入html字符串
* before 在开始标签之前插入html字符串
* after 在结束标签之后插入html字符串
* atStart 在开始标签之后插入字符串
* atEnd 在结束标签之前插入字符串
*/
Insert = ( function(){
if( document.createElement( "div" ).insertAdjacentHTML ){
return {
// e element, h html
before : function( e, h ){
// beforebegin大小写均可, h {string} html字符串或text均可
e.insertAdjacentHTML( "beforebegin", h );
},
after : function( e, h ){
e.insertAdjacentHTML( "afterend", h );
},
atStart : function( e, h ){
e.insertAdjacentHTML( "afterbegin", h );
},
atEnd : function( e, h ){
e.insertAdjacentHTML( "beforeEnd", h );
}
};
}
function fragment( html ){
var tmpDiv = document.createElement( "div" ),
frag = document.createDocumentFragment();
tmpDiv.innerHTML = html;
while( tmpDiv.firstChild ){
frag.appendChild( tmpDiv.firstChild );
}
return frag;
}
var Insert = {
before : function( e, h ){
e.parentNode.insertBefore( fragment( h ), e );
},
after : function( e, h ){
// 当e.nextSibling为空时,insertBefore方法会将frament(h)插入到最后
e.parentNode.insertBefore( fragment( h ), e.nextSibling );
},
atStart : function( e, h ){
e.insertBefore( fragment( h ), e.firstChild );
},
atEnd : function(){
e.appendChild( fragment( h ) );
}
};
// 同时解决insertAdjacentHTML的兼容性问题
Element.prototype.insertAdjacentHTML = function( pos, html ){
switch( pos.toLowerCase() ){
case "beforebegin" : return Insert.before( this, html );
case "afterend" : return Insert.after( this, html );
case "afterbegin" : return Insert.atStart( this, html );
case "beforeend" : return Insert.atEnd( this, html );
}
};
return Insert;
}() );
原生js--insertAdjacentHTML的更多相关文章
- 放弃jQuery,使用原生js吧!
转自:http://itakeo.com/blog/2015/07/28/nojq/ 随着IE6.7.8的逐渐淘汰,HTML5的兴起,以及侧重点放在了移动端,jQuery可能变的不在那么重要,原生一样 ...
- 原生js操作Dom节点:CRUD
知识点,依然会遗忘.我在思考到底是什么原因.想到研究生考试准备的那段岁月,想到知识体系的建立,知识体系分为正向知识体系和逆向知识体系:正向知识体系可以理解为教科书目录,逆向知识体系可以理解考试真题. ...
- 原生js替换jQuery各种方法-中文版
原文https://github.com/nefe/You-D... 原生JS与jQuery操作DOM对比 You Don't Need jQuery 前端发展很快,现代浏览器原生 API 已经足够好 ...
- 原生JS封装Ajax插件(同域&&jsonp跨域)
抛出一个问题,其实所谓的熟悉原生JS,怎样的程度才是熟悉呢? 最近都在做原生JS熟悉的练习... 用原生Js封装了一个Ajax插件,引入一般的项目,传传数据,感觉还是可行的...简单说说思路,如有不正 ...
- 常用原生JS方法总结(兼容性写法)
经常会用到原生JS来写前端...但是原生JS的一些方法在适应各个浏览器的时候写法有的也不怎么一样的... 今天下班有点累... 就来总结一下简单的东西吧…… 备注:一下的方法都是包裹在一个EventU ...
- 原生JS实现"旋转木马"效果的图片轮播插件
一.写在最前面 最近都忙一些杂七杂八的事情,复习软考.研读经典...好像都好久没写过博客了... 我自己写过三个图片轮播,一个是简单的原生JS实现的,没有什么动画效果的,一个是结合JQuery实现的, ...
- 再谈React.js实现原生js拖拽效果
前几天写的那个拖拽,自己留下的疑问...这次在热心博友的提示下又修正了一些小小的bug,也加了拖拽的边缘检测部分...就再聊聊拖拽吧 一.不要直接操作dom元素 react中使用了虚拟dom的概念,目 ...
- React.js实现原生js拖拽效果及思考
一.起因&思路 不知不觉,已经好几天没写博客了...近来除了研究React,还做了公司官网... 一直想写一个原生js拖拽效果,又加上近来学react学得比较嗨.所以就用react来实现这个拖 ...
- 原生JS实现全屏切换以及导航栏滑动隐藏及显示——重构前
思路分析: 向后滚动鼠标滚轮,页面向下全屏切换:向前滚动滚轮,页面向上全屏切换.切换过程为动画效果. 第一屏时,导航栏固定在页面顶部,切换到第二屏时,导航条向左滑动隐藏.切换回第一屏时,导航栏向右滑动 ...
- 原生js实现autocomplete插件
在实际的项目中,能用别人写好的插件实现相关功能是最好不过,为了节约时间成本,因为有的项目比较紧急,没充分时间让你自己来写,即便写了,你还要花大量时间调试兼容性.但是出于学习的目的,你可以利用闲暇时间, ...
随机推荐
- 随手记录一下 Vue 下来框搜索 select2 封装成vue
引入布局文件 <link href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.3/css/select2.min.css& ...
- Linux Shell 基本语法
一. Linux基本命令 1.1. cp命令 该命令的功能是将给出的文件或目录拷贝到另一文件或目录中,功能十分强大. 语法: cp [选项] 源文件或目录 目标文件或目录 1.2. mv命令 用户可 ...
- ZooKeeper简述
一.简介 ZooKeeper是一个高性能,分布式的,开源分布式应用协调服务.它提供了简单原始的功能,分布式应用可以基于它实现更高级的服务,比如同步,集群管理,命名空间,配置维护等.ZooKeeper使 ...
- 激活函数ReLU、Leaky ReLU、PReLU和RReLU
“激活函数”能分成两类——“饱和激活函数”和“非饱和激活函数”. sigmoid和tanh是“饱和激活函数”,而ReLU及其变体则是“非饱和激活函数”.使用“非饱和激活函数”的优势在于两点: 1 ...
- 50.EasyGank妹纸App
50.EasyGank妹纸App 前言 基于MVP模式下 , RxJava+RxAndroid+Retrofit的组合 . RxJava RxAndroid Retrofit Okhttp Gson ...
- hdfs 机架感知
一.背景 分布式的集群通常包含非常多的机器,由于受到机架槽位和交换机网口的限制,通常大型的分布式集群都会跨好几个机架,由多个机架上的机器共同组成一个分布式集群.机架内的机器之间的网络速度通常都会高 ...
- win7+ oracle +php环境的搭建
http://blog.csdn.net/chchmlml/article/details/6887326 先下载个wmpp1.7.5(之前在xp上也是这个,所以就继续),安装,一切顺利,打开phpi ...
- 【AI】face_recognition
1.pip install cmake 2.pip install boost 3.pip install dlib 4.pip install face_recognition
- 【代码审计】QYKCMS_v4.3.2 任意文件读取漏洞分析
0x00 环境准备 QYKCMS官网:http://www.qykcms.com/ 网站源码版本:QYKCMS_v4.3.2(企业站主题) 程序源码下载:http://bbs.qingyunke. ...
- 【RF库Collections测试】Set List Value
Name:Set List ValueSource:Collections <test library>Arguments:[ list_ | index | value ]Sets th ...