自丢网

标题: 利用insertAdjacentHTML()可以直接把字符串格式元素添加到父元素中 [打印本页]

作者: admin 时间: 2020-3-21 16:25
标题: 利用insertAdjacentHTML()可以直接把字符串格式元素添加到父元素中
利用insertAdjacentHTML()可以直接把字符串格式元素添加到父元素中
Element.insertAdjacentHTML方法解析HTML字符串，然后将生成的节点插入DOM树的指定位置。

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操作快得多。

欢迎光临自丢网 (https://www.zidiu.com/)