修改节点的内容除了常用的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. IOS开发中返回值为null时的处理

    在IOS开发中,如果得到了null返回值很容易造成程序崩溃,null和nil的判断方法不同. nil的判断方法: if(data==nil) {      NSLog(@"data is n ...

  2. Matlab2014下载和破解方法,以及Matlab很好的学习网站

    ISO镜像下载地址链接: http://pan.baidu.com/s/1i31bu5J 密码: obo1  单独破解文件下载链接: http://pan.baidu.com/s/1c0CGQsw 密 ...

  3. android 之 spinner的简单使用

    先看spinner的效果图: 代码: MainActivity package com.mecury.spinnertest; import java.util.ArrayList; import a ...

  4. 忙碌的Nova君 (活动安排问题、贪心算法)

    题目描述 理论上,Nova君是个大闲人,但每天还是有一大堆事要干,大作业啦,创新杯啦,游戏啦,出题坑人啦,balabala......然而精力有限,Nova君同一时间只能做一件事,并不能一心二用.假设 ...

  5. CentOS6.5+nginx+tomcat负载均衡集群

    思路: 1.安装jdk 2.安装tomcat 3.安装nginx依赖库 4.安装nginx 5.nginx+2个tomcat集群 一:网络拓扑

  6. android5.x新特性之Tinting

    Android5.X对图形操作上有更多的功能.下面来看看Tinting(着色) Tinting的使用非常简单,几乎 没什么好说的,只要在xml中配置好tint和tintMode即可.直接看实际例子吧. ...

  7. session实现购物系统的简例和application实现统计页面访问次数的简例

    login.jsp <body>  <form action="checkLogin.jsp">  <table>  <tr>< ...

  8. iOS网络编程--NSConnection的同步连接与异步连接

    // // ZFViewController.m // 0628-表单验证 // // Created by zfan on 14-6-28. // Copyright (c) 2014年 zfan. ...

  9. javascript 动态改变onclick事件

    第一种:button.onclick = Function("alert('hello');"); 第二种:button.onclick = function(){alert(&q ...

  10. git的使用(二)

    1.几个概念 (1)工作区指当前编辑代码的地方,是.git仓库所在的文件夹. (2)暂存区是一个概念,并不存在这个区. (3)仓库是.git文件夹,是运行git init命令时自动创建的,默认是隐藏的 ...