除了innerHTML,还有什么更好的方法

嫌innerHTML性能不够好,推荐几个新方法

innerHTML我们都很熟悉,并且在初学js的时候用的很多,也很方便,比一个个创建dom元素,再利用appendChild拼接方便多了,但是当我们要处理的量比较大时,innerHTML就GG了,看过网上别人分享的一些改进方法,在这里也整理一下分享给大家。
第一种解决方案:
  1. 使用insertAdjacentHTML()方法,

  2. 这个方法接收两个参数,一个是where,一个是text

  3. where是指插入的位置,有四个可选值,分别为:
    beforeBegin: 插入到标签开始前
    afterBegin:插入到标签开始标记之后
    beforeEnd:插入到标签结束标记前
    afterEnd:插入到标签结束标记后
    text即为html文本,例如“<li></li>”;

  4. 关于四个位置参数的解析请看代码:
    先看一下html结构是这样的:

    <ul id="list">
          <li>one</li>
    </ul>
    
  • beforeBegin: 插入到标签开始前:

    var list=document.getElementById("list");
    list.insertAdjacentHTML("beforeBegin","<li>two</li>");
    

    在浏览器中的查看代码是这样的:

    <li>two</li>
    <ul>
      <li>one</li>
    </ul>
    
  • afterBegin:插入到标签开始标记之后

    var list=document.getElementById("list");
    list.insertAdjacentHTML("afterBegin","<li>two</li>");
    

    在浏览器中是这样的:

    <ul id="list">
          <li>two</li>
          <li>one</li>
    </ul>
    
  • beforeEnd:插入到标签结束标记前
    var list=document.getElementById("list");
    list.insertAdjacentHTML("beforeEnd","<li>two</li>");
    在浏览器中是这样的:

    <ul id="list">
          <li>one</li>
           <li>two</li>
    </ul>
    
  • afterEnd:插入到标签结束标记后

    var list=document.getElementById("list");
    list.insertAdjacentHTML("afterEnd","<li>two</li>");
    在浏览器:

    <ul id="list">
         <li>one</li>
    </ul>
    <li>two</li>
    
  1. 关于第二个参数,可以是一个字符串参数,像这样:
    var html="<li>two</li>";
    list.insertAdjacentHTML("afterEnd",html);
    各大浏览器的新版本都已经支持这个方法。具体的版本支持情况可以自行百度。

再来一个自制的方法:appendHTML();

如果你了解appendChild方法,应该能猜到,appendHTML方法就是在一个元素之后追加一段html代码,具体实现方法如下:

方法思想

首先创建一个容器,这里是div
然后将要追加的html代码添加到这个容器中;
取出这个容器中的所有节点,遍历每一个节点;
创建一个文档片段,fragment=document.createDocumentFragment();
将节点复制到文档片段中,这里使用cloneNode函数执行深复制;
最后将文档片段追加到元素中。

function appendHTML(ele,html,site){
    var div=document.createElement("div"),
        nodes=null,
        fragment=document.createDocumentFragment();
    div.innerHTML=html;
    nodes=div.childNodes;
    for(var i=0,len=nodes.length;i<len;i++){
        fragment.appendChild(nodes[i].cloneNode(true));
   	}
   	site=site||"before";
   	site !== "before"? ele.appendChild(fragment) : ele.insertBefore(fragment, ele.firstChild);
    // 回收内存
    nodes=null;
    fragment=null;
}

可以这样使用:
appendHTML(list,html,"after");
appendHTML(list,html,"before");
分别产生的效果是:(还是利用上面的html代码结构)

//after
	<ul id="list">
	      <li>one</li>
	       <li>two</li>
	</ul>
	//before
	<ul id="list">
	      <li>two</li>
	       <li>one</li>
	</ul>

参考资料:https://www.cnblogs.com/luxueping/p/5597520.html

  • 2
    点赞
  • 4
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值