赶知识网

DOM appendHTML实现及insertAdjacentHTML

Js/Css/jQuery 2016-11-30发布 2330次点击
JS中有很多基本DOM方法,例如createElement, parentNode等,其中,appendChild方法是相当地常用与熟知,可谓是DOM节点方法中的“无人不识君”!


appendChild的作用是在指定元素节点的最后一个子节点之后添加节点。好记又好用,大家都喜欢。


appendChild方法就像是直接买饺子,实际上,我们还经常会遇到买饺子皮和馅自己包的情况。放在HTML中解释就是不是append节点,而是append构成节点的HTML字符代码。


例如,我们点击“更多评论”按钮,需要ajax加载评论相关HTML代码并插入到页面中,此时,appendChild显然就不如appendHTML方法来得方便。


二、如何实现appendHTML方法?
如果是纯粹没有脚本等行为的容器。 我们直接innerHTML拼接就可以了。例如,append一个图片HTML片段,我们可以:


container.innerHTML = container.innerHTML + '<img src="zhanghanyun.jpg" />';
好东西喜欢留到最后吃,重点都是留到最后讲。因此,上面的,大家都懂的,就是走过场的,只在特殊情况用用(单纯HTML处理),如果真要构造一个通用的appendHTML方法,innerHTML拼接显然是没有市场的。 //zxx: 如果是面试,一定要先说重点,不要铺垫酝酿什么的……


考虑到容器的原HTML极可能包含事件,因此,实现append效果的时候一定不能干扰之前的内容,那我们该如何实现呢?


不卖关子了,还是要借助appendChild方法。我们把HTML字符串转换成节点,然后通过appendChild方法载入进去。


如何将HTML字符串(假设字符串变量名为html)转换成节点呢?如下操作即可:


// 创建div节点
var div = document.createElement("div");
// 装载html字符串
div.innerHTML = html;
// 此时div.childNodes就是我们需要的节点了!
return div.childNodes;
下面要做的就是将这些节点append进去,下面是我们自然理解的实现,遍历:


var nodes = div.childNodes;
for (var i=0, length=nodes.length; i<length; i+=1) {
   // 容器container加载克隆的节点 - 克隆的作用是保证nodes的完整
   container.appendChild(nodes[i].cloneNode(true)); 
}
上面代码功能虽然实现,但是性能no, no, no. 尤其低版本IE下,缺少优化的机制①,每次appendChild造成的回流与渲染会让浏览器high到叫的。


对于DOM节点插入,大家应该都熟知“文档片段优化法”。具体来讲,就是使用document.createDocumentFragment()创建一个文档片段,然后,把节点一个一个append到这个片段中,回到页面上的时候,直接append这个文档片段就可以了-只有一次。

Top10

沪ICP备09053415号 © 赶知识网