最新公告  | 
  • CTRL + D 加入收藏不迷路哦

  • 欢迎您光临码云笔记网,一个关注WEB前端开发的个人技术博客!

JS appendHTML实现加载更多评论的方法

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

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

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

JS appendHTML实现加载更多评论的方法

如何实现appendHTML方法?

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

container.innerHTML = container.innerHTML + '<img src="mybj123.jpg" />';

当然,这个大家都懂的,这只是一个铺垫,只在特殊情况用用(单纯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<nodes.length; 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<length; i+=1) {
   // 文档片段加载克隆的节点
   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<length; i+=1) {
       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<length; i+=1) {
       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 = '<span class="g9">全部加载完毕</span>';
                self = null;
            } else {
                self.innerHTML = '加载失败!点击重试~';
                self.ajaxing = false;
            }            
        }
    }
    return false;
});

结语

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

1. 本站所有免费资源来源于用户上传和网络,因此不包含技术服务请大家谅解!如有侵权请邮件联系客服!
2. 本站不保证所提供下载的免费资源的准确性、安全性和完整性,免费资源仅供下载学习之用!如有链接无法下载、失效,请联系客服处理!
3. 您必须在下载后的24个小时之内,从您的电脑中彻底删除上述内容资源!如用于商业或者非法用途,与本站无关,一切后果请用户自负!
4. 如果您也有好的资源或技术教程,您可以投稿发布,成功分享后有站币奖励和额外收入!
5. 加入前端开发QQ群:565733884,我们大家一起来交流技术!
码云笔记 » JS appendHTML实现加载更多评论的方法

发表评论