**
Element.insertAdjacentHTML()
**
element.insertAdjacentHTML(position, text);
该方法接受两个参数,第一个是指定位置,第二个是待解析的字符串。
指定位置共有四个。
- beforebegin:在当前元素节点的前面。
- afterbegin:在当前元素节点的里面,插在它的第一个子元素之前。
- beforeend:在当前元素节点的里面,插在它的最后一个子元素之后。
- afterend:在当前元素节点的后面。
// 原来的HTML代码:<div id="one">one</div>
var d1 = document.getElementById('one');
d1.insertAdjacentHTML('afterend', '<div id=\"two\">two</div>');
// 现在的HTML代码:
// <div id="one">one</div><div id="two">two</div>
该方法不是彻底置换现有的DOM结构,这使得它的执行速度比innerHTML操作快得多。
比如我们有一个数组,想要把数组的数据用li标签来展示
//HTML代码
<ul id="myul"></ul>
//js代码
let arr = ["1","2","3","4","5",];
for (let i = 0; i < arr.length; i++){
document.getElementById("myul").insertAdjacentHTML('beforeend', "<li class=\"list\">"+ v.video[i] +"</li>")
}
运行结果如下: