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

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

第一种解决方案：

使用insertAdjacentHTML()方法，
这个方法接收两个参数，一个是where，一个是text
where是指插入的位置，有四个可选值，分别为：
beforeBegin: 插入到标签开始前
afterBegin:插入到标签开始标记之后
beforeEnd:插入到标签结束标记前
afterEnd:插入到标签结束标记后
text即为html文本，例如“<li></li>”；
关于四个位置参数的解析请看代码：
先看一下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>
```

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

除了innerHTML，还有什么更好的方法相关推荐

win2008服务器系统设置,处理windows 2008系统设置让运行更流畅的方法
windows 2008系统对于不同的用户来说在解除以后很多的时候发现不和其他的系统一样,在运行的时候是没有那么的稳定和运行流畅的,那在电脑中是可以自己设做一些性的稳定性增加电脑使用的情况的,今天小编 ...
Java黑皮书课后题第7章：*7.6（修改程序清单5-15）程序清单5-15通过检验2、3、4…n/2是否是数n的因子来判断n是否为素数。判断n是否素数的更高效的方法是检验小于等于根n的素数是否有n整
*7.6(修改程序清单5-15)程序清单5-15通过检验2.3.4-n/2是否是数n的因子来判断n是否为素数.判断n是否素数的更高效的方法改写5-15 题目题目描述破题程序清单5-15(非本题代 ...
比dropout更好的方法_比较自己的更好方法
比dropout更好的方法 by Tanner Christensen 由Tanner Christensen 比较自己的更好方法 (A Better Way to Compare Yourself) ...
比dropout更好的方法_经营公司有更好的方法
比dropout更好的方法 6月,作者兼Red Hat首席执行官Jim Whitehurst出现在CUBE的一集中,在那里他分享了他领导开放组织和组织决策的未来的想法. 下面是这段视频的录像-2015 ...
php 超大整数计算,PHP int 超大溢出整数的加减运算函数，如果有更好的方法欢迎探讨...
[分享]PHP int 超大溢出整数的加减运算函数,如果有更好的方法欢迎探讨分享一个溢出整数加减的运算函数,刚刚写的,对于溢出的整数可以用这个来进行加减运算. 遗憾的几点是: 一代码太多: 二只有 ...
用php循环星期一到星期日,php – 获取最后一个星期一 – 星期日的日期：有更好的方法吗？...
我正在准备一个关于mySQL的查询,以便从上周获得记录,但是我必须将周作为周一至周日.我原来这样做: WHERE YEARWEEK(contactDate) = YEARWEEK(DATE_SUB(C ...
php中超过int真么办,PHP int 超大溢出整数的加减运算函数，如果有更好的方法欢迎探讨...
[分享]PHP int 超大溢出整数的加减运算函数,如果有更好的方法欢迎探讨分享一个溢出整数加减的运算函数,刚刚写的,对于溢出的整数可以用这个来进行加减运算. 遗憾的几点是: 一代码太多: 二只有 ...
有没有更好的方法在JavaScript中执行可选的函数参数？ [重复]
本文翻译自:Is there a better way to do optional function parameters in JavaScript? [duplicate] This quest ...
两个让Transformer网络变得更简单，更高效的方法
点击上方"AI公园",关注公众号,选择加"星标"或"置顶" 作者:Sainbayar Sukhbaatar, Armand Joulin 编 ...
arduino两轮小车四红外传感模块循迹代码供大家参考交流，如有更好的方法希望不吝赐教
参加学校举办的循迹小车比赛,由于是新手,写的程序不免有些冗杂,但结果还是不错的,所以写在这里供大家参考交流. 如有更简单的方法,请不吝赐教

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

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

第一种解决方案：

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

除了innerHTML，还有什么更好的方法相关推荐

最新文章

热门文章

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

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

第一种解决方案：

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

除了innerHTML，还有什么更好的方法相关推荐

最新文章

热门文章

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