修改节点的内容除了常用的innerHTML和innerText之外,还有insertAdjacentHTML和insertAdjacentText方法,可以在指定的地方插入内容。insertAdjacentText方法与insertAdjacentHTML方法类似,只不过是插入纯文本,参数相同。

语法:

object.insertAdjacentHTML(where,html)

参数说明:

1.where:包括beforeBegin,beforeEnd,afterBegin,afterEnd

beforeBegin: 插入到开始标签的前面。

beforeEnd:插入到结束标签的前面。

afterBegin:插入到开始标签的后面。

afterEnd:插入到结束标签的后面。

2.html:需插入的html内容

需注意的是:

1.这两个方法必须等文档加载好后才能执行,否则会出错。

2.insertAdjacentText只能插入普通文本,insertAdjacentHTML插入html代码。

3.使用insertAdjacentHTML方法插入script脚本文件时,必须在script元素上定义defer属性。

4.使用insertAdjacentHTML方法插入html代码后,页面上的元素集合将发生变化。

5.insertAdjacentHTML方法不适用于单个的空的元素标签(如img,input等)。

说明:

JS insertAdajcentHTML 方法简介的更多相关文章

  1. Node.js 教程 01 - 简介、安装及配置

    系列目录: Node.js 教程 01 - 简介.安装及配置 Node.js 教程 02 - 经典的Hello World Node.js 教程 03 - 创建HTTP服务器 Node.js 教程 0 ...

  2. jQuery的AJAX方法简介及与其他文件$符号冲突的解决办法

    一.重要的jQuery AJAX方法简介 $.load(url) 从服务器载入数据 $.get(url,callback) 从服务器请求数据,并执行回调函数 $.post(url,data,callb ...

  3. 还在手动给css加前缀?no!几种自动处理css前缀的方法简介

    原文首发于个人博客:还在手动给css加前缀?no!几种自动处理css前缀的方法简介 我们知道在写css的时候由于要兼容不同厂商浏览器,一些比较新的属性需要给它们添加厂商前缀来兼容.移动端还好,基本只要 ...

  4. 【转】安装Vue.js的方法

    安装vue.js的方法   一.简介 Vue.js 是什么 Vue.js(读音 /vjuː/, 类似于 view) 是一套构建用户界面的 渐进式框架.与其他重量级框架不同的是,Vue 采用自底向上增量 ...

  5. D3.js 之 d3-shap 简介(转)

    [转] D3.js 之 d3-shap 简介 译者注 原文: 来自 D3.js 作者 Mike Bostock 的 Introducing d3-shape 译者: ssthouse 联系译者: 邮箱 ...

  6. js调用php和php调用js的方法举例

    js调用php和php调用js的方法举例1 JS方式调用PHP文件并取得php中的值 举一个简单的例子来说明: 如在页面a.html中用下面这句调用: <script type="te ...

  7. 网络神器Greasemonkey(油猴子)使用方法简介+脚本分享【转载】

    推荐下,觉得这个方法有用, 今天艾薇百科来介绍一下功能强大的Greasemonkey,俗称"油猴子",Greasemonkey可以自由定制网页,实现你想要的各种功能.堪称" ...

  8. Redis Cluster搭建方法简介22211111

    Redis Cluster搭建方法简介 (2013-05-29 17:08:57) 转载▼       Redis Cluster即Redis的分布式版本,将是Redis继支持Lua脚本之后的又一重磅 ...

  9. Monte Carlo方法简介(转载)

    Monte Carlo方法简介(转载)       今天向大家介绍一下我现在主要做的这个东东. Monte Carlo方法又称为随机抽样技巧或统计实验方法,属于计算数学的一个分支,它是在上世纪四十年代 ...

随机推荐

  1. 全球最低功耗蓝牙单芯片DA14580的软件体系 -层次架构和BLE消息事件处理过程

    在作者之前发表的<全球最低功耗蓝牙单芯片DA14580的系统架构和应用开发框架分析>.<全球最低功耗蓝牙单芯片DA14580的硬件架构和低功耗>.<全球最低功耗蓝牙单芯片 ...

  2. Android源码分析之SparseArray

    本来接下来应该分析MessageQueue了,可是我这几天正好在实际开发中又再次用到了SparseArray(之前有用到过一次,那次只是 大概浏览了下源码,没做深入研究),于是在兴趣的推动下,花了些时 ...

  3. C语言。自定义函数简单版

    #include <stdio.h> //函数声明 void sayHi(); //函数实现 void sayHI() { printf("大家好!!\n"); } i ...

  4. iOS开发--隐藏(去除)导航栏底部横线

    iOS开发大部分情况下会使用到导航栏,由于我司的app导航栏需要与下面紧挨着的窗口颜色一致,导航栏底部的横线就会影响这个美观,LZ使用了以下方法.觉得不错,分享来给小伙伴们. 1)声明UIImageV ...

  5. python基本数据结构-集合-方法

  6. Linux学习之二——档案与目录的属性和权限

    一.属性和权限的基本概念 Linux一般将档案可存取的身份分为三个类别,分别是 owner/group/others,这三种身份各有 read/write/execute 等权限. 所有的系统上的账号 ...

  7. Spring中AOP原理,源码学习笔记

    一.AOP(面向切面编程):通过预编译和运行期动态代理的方式在不改变代码的情况下给程序动态的添加一些功能.利用AOP可以对应用程序的各个部分进行隔离,在Spring中AOP主要用来分离业务逻辑和系统级 ...

  8. 自动化测试selenium+java 第一章

    selenium元素的定位以及操作 1. 元素的定位 Selenium 自动化,我们需要做的最基本的事情就是在页面找到元素并通过脚本程 序去操作这个元素,实现模拟人工操作.我们有多种定位元素的方式可以 ...

  9. Ubuntu 14.04 单机安装 CEPH

    0.如果先前安装过ceph,则先卸载 sudo stop ceph-all //停止所有CEPH进程 ceph-deploy uninstall [{ceph-node}] //卸载所有ceph程序 ...

  10. ZBrush中的Clip剪切笔刷怎么快速运用

    Clip剪切笔刷可以对模型网格进行剪切操作,也可以叫做剪切笔刷.接下来看一下Clip切割笔刷在ZBrush中是如何使用的. 查看更多内容请直接前往:http://www.zbrushcn.com/ji ...