/**
* 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. OkHttp使用全解析(转)。

    Android系统提供了两种HTTP通信类,HttpURLConnection和HttpClient.关于HttpURLConnection和HttpClient的选择>>官方博客尽管Go ...

  2. Android第三方开源对话消息提示框:SweetAlertDialog(sweet-alert-dialog)

    Android第三方开源对话消息提示框:SweetAlertDialog(sweet-alert-dialog) Android第三方开源对话消息提示框:SweetAlertDialog(sweet- ...

  3. 【转】HTML,CSS,font-family:中文字体的英文名称 (宋体 微软雅黑)

    宋体 SimSun 黑体 SimHei 微软雅黑 Microsoft YaHei 微软正黑体 Microsoft JhengHei 新宋体 NSimSun 新细明体 PMingLiU 细明体 Ming ...

  4. 用Navicat for MYsql创建表,插入中文显乱码

    段都有编码设置.出现乱码肯定是你现在用的编码混乱造成的 解决办法: 第一步 先改数据库编码 先修改你的数据库,如果你页面用的是UTF-8编码那么你数据库内的编码也需要设置为UTF-8,每个字段都需要设 ...

  5. 二模 (11) day1

    第一题: 题目大意:用邻接矩阵给出一棵树(边权非负)上N个节点相互之间的最短路距离,求这棵树所有边权的和. 解题过程: 1.暂时还没想出来,待AC. 第二题: 题目大意:给出一些单词,然后建立Trie ...

  6. for循环往Oracle中插入n条数据,主键自增

    1.主键自增实现方法:http://www.cnblogs.com/Donnnnnn/p/5959871.html 2.for循环往Oracle中插入n条数据 BEGIN .. loop insert ...

  7. mac 下隐藏和显示文件

    显示:defaults write com.apple.finder AppleShowAllFiles -bool true隐藏:defaults write com.apple.finder Ap ...

  8. 【第53套模拟题】【递推】【RMQ】【二进制】【分块】

    题目:(开始自己描述题目了...) 第一题大意: 求1~n的所有排列中逆序对为k个的方案数,输出方案数%10000,n<=1000. 解:这道题一个递推,因为我基本上没怎么自己做过递推,所以推了 ...

  9. 数据结构-List

    Lis的实现: /////////////////////////////////////////////////////////////////////////////// // // FileNa ...

  10. hadoop shell 操作命令

    shell操作命令: hdfs的路径,在core-site.xml中定义 <property> <name>fs.default.name</name> <v ...