09月16, 2016

js记录之插入DOM节点

不得不承认,现在很多的五、六年前端,和刚刚起步的前端,其实差不多是在一个“起跑线”上了。因为很多五六年的前端,前些年都是在切图搞兼容,或者js搞兼容。而现在的前端,慢慢在比拼谁的“内功”好了,即对一个东西的理解能力。

所以就算会react、angular2、vue之类的框架,也要深入底层了解js的一些机制,免得未来缺少核心竞争力。

我之前对insert DOM的了解,一直停留在appendChildinsertBefore上。最近在看某些代码时,看到了insertAdjacentHTML

insertAdjacentHTML() 将指定的文本解析为 HTML 或 XML,然后将结果节点插入到 DOM 树中的指定位置处。该方法不会重新解析调用该方法的元素,因此不会影响到元素内已存在的元素节点。从而可以避免额外的解析操作,比直接使用 innerHTML 方法要快。

语法

element.insertAdjacentHTML(position, text); position 是相对于 element 元素的位置,并且只能是以下的字符串之一:

  • beforebegin: 在 element 元素的前面。
  • afterbegin: 在 element 元素的第一个子节点前面。
  • beforeend: 在 element 元素的最后一个子节点后面。
  • afterend: 在 element 元素的后面。

text 是字符串,会被解析成 HTMLXML,并插入到 DOM 树中。

兼容性

基本上主流浏览器都是OK的,IE6啥的现在就基本不考虑了。

本文链接:www.my-fe.pub/post/js-record-insert-dom.html

-- EOF --

Comments

评论加载中...

注:如果长时间无法加载,请针对 disq.us | disquscdn.com | disqus.com 启用代理。