【笔记】js原生方法 在元素外部或内部实现添加元素功能(类似jq 的 insert 和 append)
2017-02-05 12:19
846 查看
介绍的这个方法是:insetAdjacentHTML() 方法
此方法接收两个参数:
第一个参数必为下列值:
beforebegin:在调用的元素外部的前面添加一个目标元素
afterend:在调用元素外部的后面添加一个目标元素
afterbegin:在调用元素的内部第一个子元素前面添加一个目标元素
beforeend:在调用元素的内部最后一个子元素后面添加一个目标元素
代码如下
浏览器的渲染的效果:
而且此方法是ie 的最早的方法所以兼容性特别好
兼容浏览器:IE FireFox 8+ safari opera chrome
此方法接收两个参数:
第一个参数必为下列值:
beforebegin:在调用的元素外部的前面添加一个目标元素
afterend:在调用元素外部的后面添加一个目标元素
afterbegin:在调用元素的内部第一个子元素前面添加一个目标元素
beforeend:在调用元素的内部最后一个子元素后面添加一个目标元素
代码如下
var div2 = document.querySelector("#div2"); div2.insertAdjacentHTML("beforebegin","<p>hello world</p>");//在调用元素外部前面添加一个元素 div2.insertAdjacentHTML("afterbegin","<p>hello world</p>");//在调用元素的内部添加一个子元素并取代了第一个子元素 div2.insertAdjacentHTML("beforeend","<p>hello world</p>");//在调用元素内部后面添加一个子元素 即取代了最后的子元素 div2.insertAdjacentHTML("afterend","<p>hello world</p>");//在调用元素的外部后面添加一个元素
浏览器的渲染的效果:
而且此方法是ie 的最早的方法所以兼容性特别好
兼容浏览器:IE FireFox 8+ safari opera chrome
相关文章推荐
- 通过原生JS实现为元素添加事件的方法
- 通过原生JS实现为元素添加事件的方法
- js 动态给元素添加、移除事件的实现方法
- JS实现添加,替换,删除节点元素的方法
- vuejs2.0运用原生js实现简单的拖拽元素功能
- Vue中使用Froala Editor时,外部方法调用html.insert()插入内容到光标最后停留位置功能实现
- 通过原生JS实现为元素添加事件
- 原生JS实现元素的getElementsByClassName()方法,适用于多个类名
- Vue中使用Froala Editor时,外部方法调用html.insert()插入内容到光标最后停留位置功能实现
- js和jq的insert/append/after/before添加节点和文本
- Vue中使用Froala Editor时,外部方法调用html.insert()插入内容到光标最后停留位置功能实现
- 原生js实现复制对象、扩展对象 类似jquery中的extend()方法
- 原生js实现查找/添加/删除/指定元素的class
- Vue中使用Froala Editor时,外部方法调用html.insert()插入内容到光标最后停留位置功能实现
- 原生JS不到30行,实现类似javascript MVC的功能-minTemplate
- js原生方式实现jquery中的append()方法
- 用原生js在DOM元素上面添加方法
- Vue中使用Froala Editor时,外部方法调用html.insert()插入内容到光标最后停留位置功能实现
- vuejs2.0运用原生js实现简单的拖拽元素功能