/**
* 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. splunk rest api search

    如下: curl -u admin:changeme -k https://localhost:8089/services/search/jobs -d search="search sou ...

  2. ANGULAR JS PROMISE使用

    Promise是一种模式,以同步操作的流程形式来操作异步事件,避免了层层嵌套,可以链式操作异步事件. 我们知道,在编写javascript异步代码时,callback是最最简单的机制,可是用这种机制的 ...

  3. 使用tomcat配置文件下载服务器,自定义下载列表

    先上图,利用tomcat,这个下载界面没有代码,点击文件名即可下载 详细参考:http://tomcat.apache.org/tomcat-7.0-doc/default-servlet.html

  4. ccpc 2016 省赛

    1.configuration if ide. 2.file import and export. 3.check your program more than once. ============= ...

  5. [Jquery]滑动门效果

    $(function(){    var $box=$("#box");    var $img=$box.find("img");    var imgWid ...

  6. pthread_create如何传递两个参数以上的参数

    涉及多参数传递给线程的,都需要使用结构体将参数封装后,将结构体指针传给线程 定义一个结构体 struct mypara { var para1;//参数1 var para2;//参数2 } 将这个结 ...

  7. K2 BPM医疗行业EMS解决方案

    EMS,即Event Management System,K2医疗行业EMS解决方案包括四方面的内容. 详情链接:http://www.k2software.cn/zh-hans/ems-soluti ...

  8. Mvc学习--1

    1.缓存机制[OutputCache(Duration=10)] 后面的 duration 表示缓存时间 直接放在action上面 是一个特性2.文件上传 @using (Html.BeginForm ...

  9. [转]C++运算优先级列表

    From:http://en.cppreference.com/w/cpp/language/operator_precedence Precedence Operator Description A ...

  10. 初识VBS

    做了测试快一年了吧,迫于无奈,要学习自动化的只是,首先想到了QTP,但是QTP的脚本是VBS,所以必须要会VBS. VBS其实就是一门计算机编程语言,但是缺少计算机程序语言中的部分要素,对于事件的描述 ...