js+插入html+追加,JS appendHTML实现加载更多评论的方法

JS中有很多基本DOM方法，例如createElement, parentNode等，其中，appendChild方法是相当地常用与熟知，可谓是DOM节点方法中的“无人不识君”！

appendChild的作用是在指定元素节点的最后一个子节点之后添加节点。放在HTML中解释就是不是append节点，而是append构成节点的HTML字符代码。

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

如何实现appendHTML方法？

如果是纯粹没有脚本等行为的容器。 我们直接innerHTML拼接就可以了。例如，append一个图片HTML片段，我们可以：

container.innerHTML = container.innerHTML + '';

当然，这个大家都懂的，这只是一个铺垫，只在特殊情况用用(单纯HTML处理)，如果真要构造一个通用的appendHTML方法，innerHTML拼接显然是没有市场的。

考虑到容器的原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, i

// 容器container加载克隆的节点 - 克隆的作用是保证nodes的完整

container.appendChild(nodes[i].cloneNode(true));

}

上面代码功能虽然实现，但是性能却是相当的不好，尤其是在低版本IE下，缺少优化的机制①，每次appendChild造成的回流与渲染会让浏览器high到叫的。

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

代码解释就是：

var nodes = div.childNodes

// 我就是那把快刀，

, fragment = document.createDocumentFragment();

for (var i=0, length=nodes.length; i

// 文档片段加载克隆的节点

fragment.appendChild(nodes[i].cloneNode(true));

}

// 一刀来个痛快

container.appendChild(fragment);

于是，我们在HTML元素原型上扩展，可以让高端点的浏览器(IE9+, …)都有了appendHTML方法。

HTMLElement.prototype.appendHTML = function(html) {

var divTemp = document.createElement("div"), nodes = null

// 文档片段，一次性append，提高性能

, fragment = document.createDocumentFragment();

divTemp.innerHTML = html;

nodes = divTemp.childNodes;

for (var i=0, length=nodes.length; i

fragment.appendChild(nodes[i].cloneNode(true));

}

this.appendChild(fragment);

// 据说下面这样子世界会更清净

nodes = null;

fragment = null;

};

有木有prependHTML方法？

appendHTML是在容器的最后加载HTML，那可不可以实现在容器前面加载HTML的方法呢，姑且命名为prependHTML。

自然可以，差别在于不是借助appendChild, 而是insertBefore方法。只要做如下修改就可以了：

this.appendChild(fragment);

// 变成↙

this.insertBefore(fragment, el.firstChild);

完整代码如下(单纯的兼容方法)：

var prependHTML = function(el, html) {

var divTemp = document.createElement("div"), nodes = null

, fragment = document.createDocumentFragment();

divTemp.innerHTML = html;

nodes = divTemp.childNodes;

for (var i=0, length=nodes.length; i

fragment.appendChild(nodes[i].cloneNode(true));

}

// 插入到容器的前面 - 差异所在

el.insertBefore(fragment, el.firstChild);

// 内存回收？

nodes = null;

fragment = null;

};

为节省代码，前加载HTML可以不使用prependHTML, 而是还是命名为appendHTML方法，不过通过另外一个参数控制加载的位置。处理如下：

var appendHTML = function(el, html, where) {

where = where || "bottom";

// where参数bottom(默认)或者before

where !== "before"? el.appendChild(fragment) : el.insertBefore(fragment, el.firstChild);;

MooTools框架中的DOM方法很多都是这个思路。

备注

① 大部分浏览器对元素几何改变时候的重排做了优化。据说是这样子，一定时间内本应多次重排的改变，浏览器会hold住，仅一次重排。其中如果使用分离的一步处理过程，例如计时器，依然多次重排。例如，当我们应用transition动画的时候，希望从0px变化到100px. 你如果如下代码：

dom.style.left = "0px";

dom.style.left = "100px";

元素是不会从0~100像素动画的，因为现代浏览器有自己的优化机制，它只会处理后面的dom.style.left = “100px”，使用定时器可以阻断这种优化，实现我们想要的过渡动画效果，如下：

dom.style.left = "0px";

setTimeout(function() { dom.style.left = "100px"; }, 20);

补充

除了上述提到的方法，还有一个insertAdjacentHTML方法，因此，这使得目前使用insertAdjacentHTML实现HTML片段插入效果成为了可能。

语法如下：

element.insertAdjacentHTML(position, html);

position是相对于element元素的位置，并且只能是以下的字符串之一：

beforebegin：在element元素的前面。

afterbegin：在element元素的第一个子元素前面。

beforeend：在element元素的最后一个子元素后面。

afterend：在element元素的后面。

html是字符串被解析成HTML或XML插入到DOM树中。

其中beforeend参数就是我们需要的appendHTML效果。

相关代码如下：

var $ = function(id) {

return {

0: document.getElementById(id),

length: 1,

click: function(fn) {

this[0].onclick = fn;

},

insertAdjacentHTML: function(position, html) {

this[0].insertAdjacentHTML(position, html);

}

}

};

$("commentMore").click(function() {

var xhr, self = this;

if (this.ajaxing) return;

if (window.XMLHttpRequest) {

xhr = new window.XMLHttpRequest();

} else {

xhr = new ActiveXObject("Microsoft.XMLHttp");

}

// 提示

this.innerHTML = '加载中...';

// 阻止二次点击

this.ajaxing = true;

// ajax go go go!

xhr.open("get", this.getAttribute("data-url"), true);

xhr.send(null);

xhr.onreadystatechange = function() {

if (xhr.readyState === 4) {

if (xhr.status === 200 && xhr.responseText) {

$("commentUl").insertAdjacentHTML("beforeend", xhr.responseText);

self.parentNode.innerHTML = '全部加载完毕';

self = null;

} else {

self.innerHTML = '加载失败！点击重试~';

self.ajaxing = false;

}

}

}

return false;

});

结语

以上就是今天的全部内容，希望大家喜欢，感谢阅读，一个点赞一个小小的转发就是对码云笔记最大的认可。