/**

 * insertAdjacentHTML

 * 支持 insertAdjacentHTML()方法的浏览器有 IE、Firefox 8+、Safari、Opera 和 Chrome

 */

var element = document.querySelector('#box2')

//作为前一个同辈元素插入

element.insertAdjacentHTML("beforebegin", "<p>Hello world!</p>")

//作为后一个同辈元素插入

element.insertAdjacentHTML("afterend", "<p>Hello world!</p>")

//作为第一个子元素插入

element.insertAdjacentHTML("afterbegin", "<p>Hello world!</p>")

//作为最后一个子元素插入

element.insertAdjacentHTML("beforeend", "<p>Hello world!</p>")

insertAdjacentHTML的更多相关文章

  1. (转)DOM appendHTML实现及insertAdjacentHTML

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

  2. 使用insertBefore实现insertAdjacentHTML()

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

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

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

  4. insertAdjacentHTML方法示例

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

  5. insertAdjacentHTML和insertAdjacentText方法

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

  6. Uncaught TypeError: Cannot read property 'insertAdjacentHTML' of null

    在开发Ext 项目中如果遇到 Uncaught TypeError: Cannot read property 'insertAdjacentHTML' of null 这个错误,检查下renderT ...

  7. JS代码片段：appendHTML 和 insertAdjacentHTML

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

  8. [译]JavaScript insertAdjacentHTML

    原文地址:http://davidwalsh.name/insertadjacenthtml-beforeend 该死的DOM慢的很.随着我们的网站动态交互和Ajax操作越来越多,我们需要寻找一种高性 ...

  9. 插入标记 方法 insertAdjacentHTML

    html5新增的插入标记方法,insertAdjacentHTML() 可以接受2个参数 插入位置和要插入的 HTML 文本.第一个参数必须是下列值之一: "beforebegin" ...

随机推荐

  1. 一个漂亮灵活的PHP图片验证码

    <?php class Imagecode{ private $width ; private $height; private $counts; private $distrubcode; p ...

  2. jdk和tomcat环境部署

    部署前需要准备的东西: 1.确定操作系统(32位或64位) 2.准备对应的jdk和tomcat软件 3.准备一份环境变量配置说明,省的到时候忘记了 步骤: 1.安装JDK 安装好JDK后,再配置JDK ...

  3. 闭包 （循环事件获取不到i） 和 各种解决循环获取不到i的解决方法

    for(var i in fav){ (function(){                var p=i;                var obj=$S.getId(fav[i]);     ...

  4. js基础之arguments、css

    arguments就是一个包含传入的参数的数组对象 栗子一: function sum(){ var result=0; for(var i=0;i<arguments.length;i++){ ...

  5. jsp中JavaBean的用法

    UserRegisterBean.java:这是JavaBean package JavaBean; public class UserRegisterBean { private String us ...

  6. js字符转换成整型 parseInt()函数规程Number()函数

    今天在做一个js加法的时候,忘记将字符转换成整型,导致将加号认为是连接符,  在运算前要先对字符井行类型转换,使用parseInt()函数   使用Number()将字符转换成int型效果更好

  7. mongo .update

    db.classes.update({"count":{$gt:20}},{$set:{"name":"c4"}},false,false) ...

  8. COleDateTime类型的应用

    使用COleDateTime类1) 获取当前时间.      CTime time;      time = CTime::GetCurrentTime();2) 获取时间元素.      int y ...

  9. _x、__x、__x__含义与区别

    _x是一种弱表示,它用在类中的属性或方法,表示是private属性,希望外部使用者不要直接调用它.但它只是暗示,没有任何限制性措施. private属性主要推荐的还是这种方式,因为Python的设计理 ...

  10. C++中各种容器的类型与特点

    1.vector 连续存储结构,每个元素在内存上是连续的: 支持高效的随机访问和在尾端插入/删除操作,但其他位置的插入/删除操作效率低下: 2.deque 连续存储结构,即其每个元素在内存上也是连续的 ...