利用insertAdjacentHTML()可以直接把字符串格式元素添加到父元素中

[复制链接]
查看1956 | 回复0 | 2020-3-21 16:25 | 显示全部楼层 |阅读模式
利用insertAdjacentHTML()可以直接把字符串格式元素添加到父元素中
Element.insertAdjacentHTML方法解析HTML字符串,然后将生成的节点插入DOM树的指定位置。
  1. element.insertAdjacentHTML(position, text);
复制代码
该方法接受两个参数,第一个是指定位置,第二个是待解析的字符串。
指定位置共有四个。
  • beforebegin:在当前元素节点的前面。
  • afterbegin:在当前元素节点的里面,插在它的第一个子元素之前。
  • beforeend:在当前元素节点的里面,插在它的最后一个子元素之后。
  • afterend:在当前元素节点的后面。
  1. // 原来的HTML代码:<div id="one">one</div>
  2. var d1 = document.getElementById('one');
  3. d1.insertAdjacentHTML('afterend', '<div id="two">two</div>');
  4. // 现在的HTML代码:
  5. // <div id="one">one</div><div id="two">two</div>
复制代码
该方法不是彻底置换现有的DOM结构,这使得它的执行速度比innerHTML操作快得多。
您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

UID
1
贡献
387
丢币
38902
主题
4607
回帖
116
注册时间
2018-9-25
最后登录
2024-4-16