除了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>
  

5. 关于第二个参数，可以是一个字符串参数，像这样：
   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