/**
* 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. LSM树——放弃读能力换取写能力,将多次修改放在内存中形成有序树再统一写入磁盘

    LSM树(Log-Structured Merge Tree)存储引擎 代表数据库:nessDB.leveldb.hbase等 核心思想的核心就是放弃部分读能力,换取写入的最大化能力.LSM Tree ...

  2. linux在shell date获取时间的相关操作

    获得当天的日期 date +%Y-%m-%d 输出: 2011-07-28 将当前日期赋值给DATE变量DATE=$(date +%Y%m%d) 有时候我们需要使用今天之前或者往后的日期,这时可以使用 ...

  3. myeclipse中java文件中文注释乱码问题

    在myeclipse中,有时打开java文件会发现中文注释全为乱码了,这个问题主要是因为编码的问题没有设置好,一个重要的原则就是保证所有的编码一致才不会发生乱码 出现乱码,需要知道三个地方的编码格式: ...

  4. 绑定本地Service并与之通信-----之二

    import android.os.Bundle;import android.os.IBinder;import android.app.Activity;import android.app.Se ...

  5. java之io之file类的常用操作

    java io 中,file类是必须掌握的.它的常用api用法见实例. package com.westward.io; import java.io.File; import java.io.IOE ...

  6. asp.net 页面局部刷新

    <asp:ScriptManager ID="ScriptManager1" runat="server"> </asp:ScriptMana ...

  7. 闭包 (循环事件获取不到i) 和 各种解决循环获取不到i的解决方法

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

  8. PHPExcel 学习笔记

    首先到phpexcel官网上下载最新的phpexcel类,下周解压缩一个classes文件夹,里面包含了PHPExcel.php和PHPExcel的文件夹,这个类文件和文件夹是我们需要的,把class ...

  9. 火车安排问题(dp好题)

    火车站内往往设有一些主干线分叉出去的铁路支路,供火车停靠,以便上下客或装载货物.铁路 支路有一定长度:火车也有一定的长度,且每列火车的长度相等. 假设某东西向的铁路上,有一小站.该站只有一条铁路支路可 ...

  10. Spring学习笔记之初始化和销毁方法的调用次序

    Multiple lifecycle mechanisms configured for the same bean, with different initialization methods, a ...