修改节点的内容除了常用的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. js调用php和php调用js的方法举例

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

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

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

  7. Redis Cluster搭建方法简介22211111

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

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

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

  9. 通过cookie实现搜索框内容保存关闭浏览器之前的操作、jq js实现方法

    jq实现的方法: jq需要在页面中引入JQ.cookie插件 这是一个超轻量级插件 要实现的效果: 下面是jq代码: $(function(){ var til=$("#orderInfoC ...

随机推荐

  1. codevs4096 删数问题

    题目描述 Description 键盘输入一个高精度的正整数N,去掉其中任意S个数字后剩下的数字按原左右次序将组成一个新的正整数.编程对给定的N 和S,寻找一种方案使得剩下的数字组成的新数最小. 输入 ...

  2. Word2010撤销按钮失效,Ctrl+Z失效解决办法

    1.打开注册表编辑器.按Win+R,在运行框中键入regedit,然后单击“确定”. 2.在注册表编辑器中,展开到下列注册表子项: HKEY_CURRENT_USER\Software\Microso ...

  3. Design Patterns---- Strategy 模式

    设计模式:可复用面向对象软件的基础 书中对 Strategy 模式的定义如下: 定义了一系列的算法,把它们一个个封装起来,并且使它们可相互替换.本模式使得算法可独立于它的用户而变化. 案例:设计一个商 ...

  4. 九、mysql触发器的概念

    .所谓触发器,就是指设置好某个表的某个操作(insert ,update ,delete)时候,同时触发的一个操作: 一般用来,比如说删除文章主栏目,那么可以利用触发器删除这个文章栏目下的所有文章 . ...

  5. solr和mongodb比较

    solr非常灵活,虽然mongodb添加索引查询速度比较快,但是solr查询比mongodb更加灵活,所以需要获取mongodb的oplog,实时将oplog中的数据推送到solr中 oplog A  ...

  6. 不指定order by时Sql的排序

    在sql中不指定Order by,排序是按照主键吗?答案是不一定.举个例子:   查询AttendanceEmpRank表,主键是AttendanceEmployeeRankId,而且是聚集索引   ...

  7. Android 图片加载库Glide 实战(二),占位符,缓存,转换自签名高级实战

    http://blog.csdn.net/sk719887916/article/details/40073747 请尊重原创 : skay <Android 图片加载库Glide 实战(一), ...

  8. Server版Linux命令提示符揭秘

            一直都在Ubuntu12.04和12.10  Desktop下玩.如今要在Centos6.3 Server版下做开发了,感觉还是非常不一样的. 克服一个有一个不顺利后,有那种站在山顶的 ...

  9. mysql数据表的字段操作

    CREATE TABLE `users` ( `id` int(11) NOT NULL AUTO_INCREMENT, `username` varchar(255) DEFAULT NULL, ` ...

  10. Vue系列之 =&gt; 列表动画

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...