插入HTML内容与文本内容以前用的是innerHTML与innerText方法,今天看到insertAdjacentHTML和 insertAdjacentText两个API，特地学习一下：

insertAdjacentHTML和 insertAdjacentText这两个方法很灵活，可以在指定的地方插入html内容和文本内容，在大部分情况下比element.innerHTML的性能更好，比Document Fragments更好的HTML文档插入方案，因为我们知道Document Fragments在某些IE版本中的表现不好。
insertAdjacentText方法与 insertAdjacentHTML方法类似，只不过只能插入纯文本，参数相同。

MDN上查了一下兼容性：https://developer.mozilla.org/en-US/docs/Web/API/element.insertAdjacentHTML

Feature Chrome Firefox (Gecko) Internet Explorer Opera Safari (WebKit)
Basic support 1.0 8.0 (8.0) 4.0 7.0 4.0 (527)

接口也很简单：

js 代码:
  1. element.insertAdjacentHTML(position, text);

需要传入字符串参数position，以及字符串参数html代码。我们可以对照jQuery的HTML插入方法。
参数position 的取值：

  • beforeBegin：在该元素前插入
  • afterBegin：在该元素第一个子元素前插入
  • beforeEnd：在该元素最后一个子元素后面插入
  • afterEnd：在该元素后插入

方法同意支持空元素，和innerHTML与innerText方法没什么区别了。

性能测试可以看这里：http://jsperf.com/innerhtml-vs-insertadjacenthtml-vs-dom/8

javascript DOM操作中的insertAdjacentHTML方法的更多相关文章

  1. JavaScript Dom基础-9-Dom查找方法; 设置DOM元素的样式; innerHTML属性的应用; className属性的应用; DOM元素上添加删除获取属性;

    JavaScript Dom基础 学习目标 1.掌握基本的Dom查找方法 domcument.getElementById() Domcument.getElementBy TagName() 2.掌 ...

  2. JavaScript DOM 总结

    一.DOM基础1.节点(node)层次Document--最顶层的节点,所有的其他节点都是附属于它的.DocumentType--DTD引用(使用<!DOCTYPE>语法)的对象表现形式, ...

  3. javascript dom编程艺术笔记第三章：DOM操作的5个基本方法

    JavaScript的 DOM操作,主要是对DOM这三个字母中D.O.M的操作.D代表的是document(文档),即我们可以使用javascript对文档进行操作,O代表的是object(对象),对 ...

  4. JavaScript DOM编程基础精华01（DOM入门，DOM模型和获取页面元素,事件，window对象的方法）

    DOM入门 DOM就是Html页面的模型,将每个标签都做为一个对象,JavaScript通过调用DOM中的属性.方法就可以对网页中的文本框.层等元素进行编程控制.比如通过操作文本框的DOM对象,就可以 ...

  5. javascript DOM和DOM操作的四种基本方法

    在了解了javascript的语言特性后,javascript真正大放光彩的地方来了——这就是javascript DOM Javascript DOM DOM(Document Object Mod ...

  6. javaScript DOM JQuery AJAX

    http://www.cnblogs.com/wupeiqi/articles/5369773.html 一 JavaScript JavaScript是一门编程语言,浏览器内置了JavaScript ...

  7. JavaScript DOM 对象

    JavaScript DOM 对象   什么叫DOM,DOM是文档对象模型(Document Object Model,是基于浏览器编程(在本教程中,可以说就是DHTML编程)的一套API接口,W3C ...

  8. JavaScript DOM的一些扩展

    对DOM的扩展主要是:Selectors API和HTML5. Selectors API Selectors API是由W3C发起指定的一个标准,致力于让浏览器原生支持CSS查询.Selectors ...

  9. 读书笔记：JavaScript DOM 编程艺术（第二版）

    读完还是能学到很多的基础知识,这里记录下,方便回顾与及时查阅. 内容也有自己的一些补充. JavaScript DOM 编程艺术(第二版) 1.JavaScript简史 JavaScript由Nets ...

随机推荐

  1. svg 认识及动画

    svg在线中文教程 https://svg.brucewar.me/ http://www.zhangxinxu.com/wordpress/tag/svg/ http://svgtrick.com ...

  2. Beta冲刺（1/5）（麻瓜制造者）

    今天小组进行了第一次冲刺,虽然新组员还没有确定. 今日完成任务 邓弘立:修改登录代码 李佳铭: 用户收藏UI代码编写 江郑: 进行了后台管理员界面ui的设计和环境的搭建 刘双玉:后台github仓库建 ...

  3. 5、爬虫之scrapy框架

    一 scrapy框架简介 1 介绍 Scrapy一个开源和协作的框架,其最初是为了页面抓取 (更确切来说, 网络抓取 )所设计的,使用它可以以快速.简单.可扩展的方式从网站中提取所需的数据.但目前Sc ...

  4. JFreeChart柱状图单组柱子的不同颜色显示

    JFreeChart柱状图中单组柱子用不同颜色来显示的实现方法是自定义一个Renderer来继承BarRenderer类,然后重载getItemPaint(int i,int j)方法. 实现效果如下 ...

  5. 【九校3D2T3】世界第一的猛汉王

    [问题描述] 卡普地公司举办了「世界第一的猛汉王」全球大会,来自世界各地的猛汉为了争夺「猛汉王」的名号前来一决高下.现在举行的是弓箭组选拔赛.卡普地公司为比赛新建了一张PVP地图——「猛汉竞技场」.有 ...

  6. 转://SQL PROFILE

    我们经常会碰到一些线上的SQL问题,因为执行计划不对,可能需要添加HINT才能解决.但是添加HINT就意味着需要修改应用代码.一般一个应用代码的修改.测试及发布,可能需要两三个工作日才可完成.咱们数据 ...

  7. Installation Oracle11gR2 RAC---常见报错处理

    第六章.报错处理 6.1 root.sh脚本执行失败处理 安装grid时,执行rootsh脚本报错如下: Adding Clusterware entries to inittab USM drive ...

  8. web安全之攻击

    转自 知乎https://www.zhihu.com/question/22953267 作者:潘良虎链接:https://www.zhihu.com/question/22953267/answer ...

  9. Jenkins忘记密码解决方案

    # 当jenkins忘记了管理用户的密码时,只能通过修改配置文件并重启的方式初始化设置用户名及密码,操作如下: 找到jenkins的配置目录,笔者的jenkins是下载的war包直接丢在tomcat下 ...

  10. 利用python scapy包进行抓包发包与ARP扫描

    小技巧 通过在交互式的python解释器下,可以通过help()函数查看函数或模块的用途. dir() 函数不带参数时,返回当前范围内的变量.方法和定义的类型列表:带参数时,返回参数的属性.方法列表 ...