插入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. Android 发送自定义广播(标准和本地)

    1.首先自定义一个广播接收器:MyBroadcastReceiver package example.com.mybroadcastreceiver; import android.content.B ...

  2. [HDFS_4] HDFS 的 Java 应用开发

    0. 说明 在 IDEA下 进行 HDFS 的 Java 应用开发 通过编写代码实现对 HDFS 的增删改查操作 1. 流程 1.1 在项目下新建 Moudle 略 1.2 为 Moudle 添加 M ...

  3. Linux系统根据端口号来查看其进程并杀死进程

    1.首先是查看某个端口号,(以httpd服务为例) 2.查看此端口下进程以及进程号 3.我们使用awk命令过滤出第二列,即进程号 4.杀死进程 报错的这一行表示,要杀死的进程PID为3754,但是没有 ...

  4. Java设计模式之十三 ---- 观察者模式和空对象模式

    前言 在上一篇中我们学习了行为型模式的备忘录模式(Memento Pattern)和状态模式(Memento Pattern).本篇则来学习下行为型模式的最后两个模式,观察者模式(Observer P ...

  5. 深入理解Java的堆内存和线程内存

    我们都知道Java对象都是在堆中创建的(开启逃逸分析的情况除外),比如一个线程中有一段这样的代码: public class A{ public int xxx; } 通过A a = new A(); ...

  6. golang类型判断

    _.ok:=interface{}(a).(B) 此语句用于判断对象a是否是B类型 也可以判断对象a是否实现了B接口 package main import "fmt" type ...

  7. 【转】vue项目打包部署——nginx代理访问

    我又来了,今天部署了下vue项目,使用nginx做了代理,这样可以解决跨域的问题,这里做一个简单讲解. 1.先看vue项目打包(我这里使用的是vscode开发工具) 这里是我的项目结构: 打包之前需要 ...

  8. 用JQuery操作元素的style属性

    可以直接利用css()方法获取元素的样式属性,JQuery代码如下: 1 $("p").css("color");  //获取p元素的样式颜色 无论color属 ...

  9. CF 932E Team Work

    原题题面 题目大意:求\(\sum\limits_{i=0}^{n}C_{n}^{i}i^{k}\). 我们根据套路\(n^{k}=\sum\limits_{i=0}^{k}C_{n}^{i}i!S_ ...

  10. C#的list和arry相互转化

    ,从System.String[]转到List<System.String> System.String[] str={"str","string" ...