插入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. 【PAT】B1039 到底买不买（20）（20 分）

    /* 琢磨了很久,当时还没做几道题,参考了柳婼的思路 */ #include<stdio.h> #include<string.h> char arr[1000]={'\0'} ...

  2. Lua基础之MetaTable（6）

    Lua基础之MetaTable(6) 转载地址:http://nova-fusion.com/2011/06/30/lua-metatables-tutorial/ 关于MetaTable的补充:ht ...

  3. oracle语句insert into select如何加后续插入条件

    oracle语句insert into select如何加后续插入条件 2014-01-21 10:48匿名  分类:其他编程语言 | 浏览 2746 次 oracle中有批量插入语句insert i ...

  4. CPU的内部架构和工作原理-原文

    CPU从逻辑上可以划分成3个模块,分别是.和,这三部分由CPU内部总线连接起来.如下所示: 控制单元:控制单元是整个CPU的指挥控制中心,由指令寄存器IR(Instruction Register). ...

  5. Java链式方法

    http://blog.csdn.net/lemon_shenzhen/article/details/6358537 有两种情况可运用链式方法: 第一种  除最后一个方法外,每个方法都返回一个对象 ...

  6. ASP.NET中HttpApplication中ProcessRequest方法中运行的事件顺序；ASP.NET WebForm和MVC总体请求流程图

    ASP.NET中HttpApplication中ProcessRequest方法中运行的事件顺序 1.BeginRequest  開始处理请求 2.AuthenticateRequest 授权验证请求 ...

  7. QT 13 窗口屏幕设置大小与居中显示

    <pre name="code" class="cpp">#include "mainwindow.h" #include &l ...

  8. mysql count与sum的区别

    一.count()的结果为>=0           sum()结果可能是null 二.count()计算的行数               sum()计算的是某列的求和

  9. 如何在Spring MVC Test中避免”Circular view path” 异常(转)

    文章转自http://www.cnblogs.com/chry/p/6240965.html 1. 问题的现象 比如在webConfig中定义了一个viewResolver public class ...

  10. Android程序的反破解技术

    Android 程序的破解一般步骤如下:反编译.静态分析.动态调试.重编译.我们可以从这几个步骤着手反破解 反编译 我们可以查找反编译器的漏洞,从而使反编译器无法正确解析APK文件 静态分析 对jav ...