/**

 * 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. kafka技术要点

    转载:http://blog.csdn.net/caisini_vc/article/details/48007297 Kafka是分布式发布-订阅消息系统.它最初由LinkedIn公司开发,之后成为 ...

  2. spring项目中使用定时任务

    当我们希望在某个时间点来执行一些业务方法的时候就用到定时任务,在spring的项目中使用定时任务很简单.如下 第一步.加入jar包 <dependency> <groupId> ...

  3. spring 标注

    1.添加支持标注的spring中的jar包: spring-context.jar spring-context-support.jar 2.在xml中配置命名空间和schema <beans ...

  4. winform的comboBox使鼠标滑轮修改值失效

    目标: winform窗体很多combobox下拉框,当他们其中的一个获得焦点的时候,如果滚动鼠标就会改变下拉框的值,要实现让鼠标滚轮不对下拉框的值造成影响 如下代码直接拷贝粘贴,不用修改 方法一: ...

  5. svn cleanup failed问题解决

    1.SVN出错 今早过来Update,报如下错误: 再次更新,svn会要求你执行clean up,但执行clean up仍会报错,说有未完的work item,还要求你执行clean up.汗,陷入死 ...

  6. Matlab基础

    基本运算: 一,矩阵的生成 clc ; clear all; close all; 1.直接输入 A = [ 1 ,2 ,3,4;2,3,4,5;3,4,5,6] A = 1 2 3 4 2 3 4 ...

  7. Android ScrollView与ViewPager滑动冲突

    前段时间做项目碰到在ScrollView里添加ViewPager,但是发现ViewPager的左右滑动和ScrollView的滑动冲突了,解决这个问题的方法是重写ScrollView. 代码: pub ...

  8. JDBC Thin Driver 的formats三种格式

    格式一:  Oracle JDBC Thin using a ServiceName: jdbc:oracle:thin:@//<host>:<port>/<servic ...

  9. [转] lib和dll 区别,生成及使用方法

    lib 和 dll 的区别.生成以及使用详解 [目录] lib dll介绍 生成动态库 调用动态库 生成静态库 调用静态库 首先介绍一下静态库(静态链接库).动态库(动态链接库)的概念,首先两者都是代 ...

  10. android 定时器的使用

    1.android中通常是使用AlarmManager来定时启动一个单次或重复多次操作的.具体的说就是我们通过AlarmManager设定一个时间和注册一个intent到系统中,然后在该时间到来时,系 ...