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. java I/O流 温习随笔

    java I/O流的熟练掌握是十分重要的. 在我的理解中,I/O流可以分为两种:字符流.字节流.字符流就是可以用来传输字符的流,比如传输txt文本,简单的说,只有能被电脑中的记事本直接打开并且你能看懂 ...

  2. embedded tomcat运行java web,Unable to compile class for JSP

    环境 eclipse:4.5.2 jre:1.8 java project compiler:1.8 embedded tomcat:7.0.32 可以正常启动,但是访问时,会报错. HTTP Sta ...

  3. CentOS7卸载OpenJDK,并安装Oracle官方JDK

    一.准备工具 yum源挂载已就绪:CentOS7本地yum源挂载. jdk-8u201-linux-x64.tar.gz,JDK安装包: 注意:在Linux配置JDK版本要求_jdk1.8+; 二.卸 ...

  4. hdu 1255 矩形覆盖面积(面积交)

    http://www.cnblogs.com/scau20110726/archive/2013/04/14/3020998.html 面积交和面积并基本上差不多.在面积并里,len[]记录的是覆盖一 ...

  5. Jquery系列:checkbox 获取值、选中、设置值、事件监听等操作

    <div id="divId" class="divTable"> <div class="tableBody"> ...

  6. JavaSE环境Shiro的搭建及常用API

    通过shiroAPI来进行角色的管理 模拟用户是否登录: 模拟用户是否具有相应的权限:

  7. csharp:汉字转带拼音声调

                                                                                      {                  ...

  8. drupal基础

    http://www.cnblogs.com/yaoliang11/archive/2009/07/31/1535883.html

  9. Internet Of Things

  10. 安装Android Studio的问题

    大陆墙内安装最新Android Studio多出了很多问题,不使用VPN的话,注意以下问题: 1 一直停留在fetching Android sdk compoment information界面 A ...