JavaScript insertAdjacentHTML（）的使用
含义：
1 element.insertAdjacentHTML(position, text);
名词解释：
1.element:目标元素；
2.insert:插入；
3.Adjacent: 与…毗连的; 邻近的；
4.HTML:大家用的html布局；
text:一段字符串，此方法会将其解析为节点对象，然后插入目标元素指定位置；
positon:规定被插入的位置的关键字；
position有四个参数选项：
1.beforebegin:规定在目标元素的外部开始位置插入。
2.afterbegin:规定在目标元素的内部开始位置插入。
3.beforeend:规定在目标元素的内部结束位置插入。
4.afterend:规定在目标元素的外部结束位置插入。
弄个图会更清晰点：
重点注意：该方法会将指定的文本解析为HTML或XML（也就是说标签会被解析）
实例：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
#bluerec {
width:200px;
height:150px;
background-color:blue;
}
p {
width:100px;
height:80px;
background-color:red;
}
</style>
</head>
<body>
<br />
<hr />
<div id = "bluerec"></div>
<br />
<input id = "s" type = "button" value = "点击插入"/> <script type="text/javascript">
window.onload = function(){
var blueRec = document.getElementById("bluerec");
var btn = document.getElementsByTagName("input")[0];
var str = "<p></p>";
btn.onclick = function(){
blueRec.insertAdjacentHTML("beforebegin",str);
}
}
</script>
</body>
</html>
实际效果：
对上述代码的解析：
1.初始状态：一条分割线、蓝色div、按钮
2.点击按钮后：在蓝色div上插入了p标签，取代了分割线的位置，分割线位置上移
使用场景：需要在原有元素周围追加元素时，比起innerHTML效率更高，兼容性更好
JavaScript insertAdjacentHTML（）的使用的更多相关文章
- [译]JavaScript insertAdjacentHTML
原文地址:http://davidwalsh.name/insertadjacenthtml-beforeend 该死的DOM慢的很.随着我们的网站动态交互和Ajax操作越来越多,我们需要寻找一种高性 ...
- javascript DOM操作中的insertAdjacentHTML方法
插入HTML内容与文本内容以前用的是innerHTML与innerText方法,今天看到insertAdjacentHTML和 insertAdjacentText两个API,特地学习一下: inse ...
- 全栈JavaScript之路（ 二十 ）HTML5 插入 html标记 （ 二 ）insertAdjacentHTML
insertAdjacentHTML(), 这种方法也是在IE中最早出现的.如今已纳入html5规范,它接受两个參数,一个是下列的标记之中的一个,一个是要写入的 html 代码文本. beforeb ...
- 使用insertBefore实现insertAdjacentHTML()
Element.insertAdjacentHTML()方法由IE引入,并在HTML5中标准化,它将任意的HTML标记字符串插入到指定的元素“相邻”的位置. insertAdjacentHTML()有 ...
- 利用模板将HTML从JavaScript中抽离
利用模板将HTML从JavaScript中抽离 一.当需要注入大段的HTML标签到页面中时,应该使用服务器渲染(从服务器加载HTML标签) 该方法将模板放置于服务器中使用XMLHttpRequest对 ...
- JavaScript进阶之DOM
文档对象模型DOM 文档对象模型(Document Object Model,DOM)是一种用于HTML和XML文档的编程接口.它给文档提供了一种结构化的表示方法,可以改变文档的内容和呈现方式.我们最 ...
- 15-前端开发之JavaScript
什么是 JavaScript ? JavaScript是一门编程语言,浏览器内置了JavaScript语言的解释器,所以在浏览器上按照JavaScript语言的规则编写相应代码之,浏览器可以解释并做出 ...
- 你想的到想不到的 javascript 应用小技巧方法
javascript 在前端应用体验小技巧继续积累. 事件源对象 event.srcElement.tagName event.srcElement.type 捕获释放 event.srcElemen ...
- javascript小技巧
事件源对象 event.srcElement.tagName event.srcElement.type 捕获释放 event.srcElement.setCapture(); event.srcE ...
随机推荐
- Linux文件系统被占用，磁盘使用量与实际不一致【转】
用lsof检查后才发现原因是,有文件被删除,而进程还活着,因而造成还占用空间的现象 [root@/]# lsof |grep delete 根据lsof列出的进程号,kill这些进程后,空间就释放出来 ...
- 运维笔记--Docker环境ubuntu系统安装指定版本python[3.6]
场景描述: 直接安装出现如下异常: root@ae2d02e458f3:/home# apt-get install python3.6 Reading package lists... Done B ...
- TCP 粘包问题
TCP 粘包,主要是因为发送端发送的两个包,TCP按照流进行发送,缓冲器满了才发送. 假如两个包都比较小的话,就会把两个包合并到一起进行发送,造成接收端接到的流无法知道这是一个包还是两个包 假如发送两 ...
- 转 zabbix 自动发现和 zabbix自定义用户key与参数User parameters
########31 https://www.cnblogs.com/yjt1993/p/10883345.html 1.概念 在配置Iterms的过程中,有时候需要对类似的Iterms进行添加,这些 ...
- vue install 组件
import share from './index.vue' export default { install: (Vue) => { Vue.prototype.$share = (opti ...
- Maven多模块工程打包指定模块工程方法
Maven多模块工程打包指定模块工程执行如下命令: mvn clean package -pl 指定模块工程名 -am 参数说明: -am --also-make 同时构建所列模块的依赖模块:-am ...
- AspNetCore 限流中间件IpRateLimitMiddleware 介绍
IpRateLimitMiddleware(Github: AspNetCoreRateLimit) 是ASPNETCore的一个限流的中间件,用于控制客户端调用API的频次, 如果客户端频繁访问服务 ...
- JS系列：编程语言
1.编程语言 html+css标记语言 js:轻量级的交互语言->全栈编程语言 - 面向对象: + C++ + JAVA + PHP + C# (.net doc) + JS - 面向过程 + ...
- js中常见的字符串方法(3)
match() match()方法只接受一个参数,要么是一个正则表达式,要么是一个 RegExp 对象. 调用这个方法本质上与调用RegExp的exec()方法相同, var text = " ...
- c# EF插入数据报错跟踪代码
我们在使用EF进行数据库插入的时候或出现一些插入失败的情况,但是具体是哪个字段不符合数据库设计要求无法得知,普通的try catch 无法捕获加上一下方法就可以 try { ...