插入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. Spring Boot 使用 ServletFileUpload上传文件失败，upload.parseRequest(request)为空

    使用Apache Commons FileUpload组件上传文件时总是返回null,调试发现ServletFileUpload对象为空,在Spring Boot中有默认的文件上传组件,在使用Serv ...

  2. Mac上用spotlight搜索输入几个字母后闪退

    最近使用电脑时遇到的问题: 使用spotlight进行搜索时,只要输入字母超过一定个数(在我的Mac上是3个),spotlight就闪退了. 谷歌搜索得到大部分解决方案是在系统自带词典的偏好设置里取消 ...

  3. luogu P2000 拯救世界

    嘟嘟嘟 题目有点坑,要你求的多少大阵指的是召唤kkk的大阵数 * lzn的大阵数,不是相加. 看到这个限制条件,显然要用生成函数推一推. 比如第一个条件"金神石的块数必须是6的倍数" ...

  4. 计算机网络关于IP地址的计算问题

    1.某校园网地址是202.100.192.0/18,要把该网络分成30个子网,则子网掩码应该是 (    ). A. 255.255.200.0       B. 255.255.224.0 C. 2 ...

  5. 对原型（prototype）理解？

    Javascript是一种通过原型实现继承的语言,与别的高级语言是有区别的,像Java,C#是通过类型决定继承关系的,JavaScript是的动态的弱类型语言,总之可以认为JavaScript所有都是 ...

  6. 转载 .Net多线程编程—任务Task https://www.cnblogs.com/hdwgxz/p/6258014.html

    .Net多线程编程—任务Task   1 System.Threading.Tasks.Task简介 一个Task表示一个异步操作,Task的创建和执行是独立的. 只读属性: 返回值 名称 说明 ob ...

  7. nodejs stream 手册学习

    nodejs stream 手册 https://github.com/jabez128/stream-handbook 在node中,流可以帮助我们将事情的重点分为几份,因为使用流可以帮助我们将实现 ...

  8. 深入浅出的webpack4构建工具--webpack4+react构建环境(二十)

    下面我们来配置下webpack4+react的开发环境,之前都是针对webpack4+vue的.下面我们也是在之前项目结构的基础之上进行配置下. 首先看下如下是我为 webpack4+react 基本 ...

  9. 2018-2019-2 20175105 实验一《JAVA开发环境的熟悉》实验报告

    一.实验内容及步骤 (一)使用JDK编译.运行简单的Java程序 利用cd指令和mkdir指令创建文件夹 利用vim指令编辑源代码文件 利用javac指令编译,利用java指令运行 (二)使用IDEA ...

  10. CF58E Expression 搜索

    题目传送门:http://codeforces.com/problemset/problem/58/E 题意:给出一个形如$x+y=z$(不一定正确)的式子,试输出一个$a+b=c$的式子,满足:$1 ...