insertAdjacentHTML:insertAdjacentHTML() 将指定的文本解析为HTML或XML，并将结果节点插入到DOM树中的指定位置。它不会重新解析它正在使用的元素，因此它不会破坏元素内的现有元素。这避免了额外的序列化步骤，使其比直接innerHTML操作更快。

语法：element.insertAdjacentHTML(position, text)；

beforebegin 元素自身的前边

afterbegin 插入元素内部第一个子节点的前边

beforeend 插入元素内部最后一个子节点之后

afterend 元素自身的后边

innerHTML  语法：element.innerHTML

insertAdjacentHTML与innerHTML的更多相关文章

  1. 全栈JavaScript之路（十九）HTML5 插入 html标记 （ 一 ）innerHTML 与outerHTML

    在须要给文档插入大量的html 标记下.通过DOM操作非常麻烦,你不仅要创建一系列的节点,并且还要小心地依照顺序把它们接结起来. 利用html 标签 插入技术,能够直接插入html代码字符串,简单.高 ...

  2. 深入理解DOM节点操作

    × 目录 [1]创建节点 [2]插入节点 [3]移除节点[4]替换节点[5]复制节点 前面的话 一般地,提起操作会想到“增删改查”这四个字,而DOM节点操作也类似地对应于此,接下来将详细介绍DOM的节 ...

  3. js中几种动态创建元素并设置文本内容的比较，及性能测试。

    内容 1 appendChild (都兼容) 2.insertAdjacentHTML (都兼容) 3.innerHTML (都兼容) 4.createDocumentFragment (都兼容) 动 ...

  4. innerHTML,outerHTML,innerText,outerText区别以及insertAdjacentHTML()方法

    在需要给文档插入大量的新的HTML标记的情况下,通过多次DOM操作先创建节点再指定它们之间的关系会非常麻烦而且效率不高,相对而言插入标记的方法会更加简单,速度也更快. 插入标记中有这四个属性inner ...

  5. (转)DOM appendHTML实现及insertAdjacentHTML

    appenChild() 原文转自 JS中有很多基本DOM方法,例如createElement, parentNode等,其中,appendChild方法是相当地常用与熟知,可谓是DOM节点方法中的& ...

  6. 使用insertBefore实现insertAdjacentHTML()

    Element.insertAdjacentHTML()方法由IE引入,并在HTML5中标准化,它将任意的HTML标记字符串插入到指定的元素“相邻”的位置. insertAdjacentHTML()有 ...

  7. insertAdjacentHTML方法示例

    添加HTML内容与文本内容以前用的是innerHTML与innerText方法,最近发现还有insertAdjacentHTML和insertAdjacentText方法,这两个方法更灵活,可以在指定 ...

  8. insertAdjacentHTML和insertAdjacentText方法

    IE的DHTML对象提供了四个可读写的属性来动态操作页面元素的内容:innerText, outerText, innerHTML, outerHTML. 需注意两点: 1. 其中innerText, ...

  9. JS代码片段：appendHTML 和 insertAdjacentHTML

    function appendHTML(container,html,position){ position =position || 'after'; var objE = document.cre ...

随机推荐

  1. Win2D 官方文章系列翻译 - 预乘 Alpha

    本文为个人博客备份文章,原文地址: http://validvoid.net/win2d-premultiplied-alpha/ 在计算机绘图中有两种表示颜色值不透明度的方法.Win2D 中两种方法 ...

  2. 01.使用File类读写文件

    使用File类去读数据: 方法一:使用ReadAllBytes(); 方法 namespace _01.使用File类读写数据01 { class Program { static void Main ...

  3. 02.ArrayList和HashTable

    ArrayList集合 数组的缺点: (1).数组只能存储相同类型的数据. (2).数组的长度要在定义时确定. 集合的好处: (1).集合可以存储多种不同类型的数据. (2).集合的长度是可以任意改变 ...

  4. !function()是干什么的？

    叹号后面跟函数!function和加号后面跟函数+function都是跟(function(){})();这个函数是一个意思,都是告诉浏览器自动运行这个匿名函数的,因为!+()这些符号的运算符是最高的 ...

  5. caffe-windows之手写体数字识别例程mnist

    caffe-windows之手写体数字识别例程mnist 一.训练测试网络模型 1.准备数据 Caffe不是直接处理原始数据的,而是由预处理程序将原始数据变换存储为LMDB格式,这种方式可以保持较高的 ...

  6. CSS3 常用新特性总结

    更新于(2017.07.07)会总结项目中比较常用的有些CSS属性 伪类选择器 E:first-of-type: 匹配同类型中的第一个同级兄弟元素E E:last-of-type: 匹配同类型中的最后 ...

  7. 纯CSS实现Tab切换标签效果代码

    在线演示地址如下: http://demo.jb51.net/js/2015/css-tab-bq-style-cha-codes/ <!DOCTYPE html PUBLIC "-/ ...

  8. python数据分析工具安装集合

    用python做数据分析离不开几个好的轮子(或称为科学棧/第三方包等),比如matplotlib,numpy, scipy, pandas, scikit-learn, gensim等,这些包的功能强 ...

  9. iOS Touch ID 简易开发教程

    转自:NsstringFromName 支持系统和机型 iOS系统的指纹识别功能最低支持的机型为iPhone 5s,最低支持系统为iOS 8,虽然安装iOS 7系统的5s机型可以使用系统提供的指纹解锁 ...

  10. 《ArcGIS Runtime SDK for Android开发笔记》——（11）、ArcGIS Runtime SDK常见空间数据加载

    ArcGIS Runtime SDK for Android 支持多种类型空间数据源.每一种都提供了相应的图层来直接加载,图层Layer是空间数据的载体,其主要继承关系及类型说明如下图所示: 转载请注 ...