如何将HTML字符转换成DOM节点并动态添加到文档中

前言

在开发中，尤其是在模板引擎中，经常会遇到字符串到DOM节点的动态转换。

将字符串转换成DOM节点并不难。本文主要涵盖两个主题：

将字符串转换为HTML DOM节点的基本方法及性能测试

向文档添加动态生成的DOM节点的方法和性能测试

本文示例：有以下代码段

！DOCTYPE html html lang=' en ' head meta charset=' UTF-8 ' meta name=' viewport ' content=' width=device-width，initial-scale=1.0 ' meta http-equiv=' X-UA-Compatible ' content=' ie=edge ' title document/title/head dy div id=' container '！-动态添加div class=' child ' XXX/div-/div/body/html任务是编写一个JavaScript函数，接收一个文本内容，动态生成一个包含该文本的div，并返回Node。下面就不多说了。让我们来看看边肖的详细介绍。

1.1动态创建节点

1.1.1 innerHTML

第一种方法，我们使用document.createElement方法创建一个新元素，然后使用innerHTML将字符串注入其中，最后返回firstChild得到动态创建的Node。

脚本函数create node(txt){ const template=` div class=' child ' $ { txt }/div `；让tempNode=document . create element(' div ')；tempNode.innerHTML=模板；返回tempNode.firstChild} const container=document . getelementbyid(' container ')；container . appendchild(create node(' hello '))；/script让我们看看下面的第二种方法

1.1.2 DOMParser

DOMParser实例的ParseFromString方法可以直接将字符串转换为文档对象。有了document，我们可以使用各种各样的DOM Api来操作。

函数create document(txt){ const template=` div class=' child ' $ { txt }/div `；let doc=new DOMParser()。parseFromString(模板，‘text/html’)；let div=doc.querySelector('。child’)；返回div} const container=document . getelementbyid(' container ')；container . appendchild(create document(' hello '))；1.1.2文档片段

DocumentFragment对象表示没有父文件的最小文档对象。它被用作轻量级文档，用于存储已经格式化或尚未格式化的XML片段。最大的区别是DocumentFragment不是真正的DOM树的一部分，它的改变不会引起DOM树的重渲染操作，也不会引起性能问题。

用文档的方法。createrange()。createcontextualfragment，我们可以直接将一个字符串转换成DocumentFragment对象。

函数createDocumentFragment(txt){ const template=` div class=' child ' $ { txt }/div `；让frag=document.createRange()。createContextualFragment(模板)；返回frag} const container=document . getelementbyid(' container ')；container . appendchild(createDocumentFragment(' hello '))；这里需要注意的是，我们直接将生成的DocumentFragment对象插入到目标节点中，这将把它自己的所有点都插入到目标节点中，不包括它自己。我们也可以使用

获取frag.firstChild生成的div。

性能测试

我们简单对比一下以上三种方法的性能，只是测试生成单个节点，在实际使用中可能没有实际意义。

首先测试createNode。

函数create node(txt){ const template=` div class=' child ' $ { txt }/div `；让start=date . now()；for(设I=0；我1000000；I){ let tempNode=document . create element(' div ')；tempNode.innerHTML=模板；让node=tempNode.firstChild} console . log(date . now()-start)；} create node(' hello ')；在6322小时内测试100万个节点的生成。

再次测试createDocument。

函数create document(txt){ const template=` div class=' child ' $ { txt }/div `；让start=date . now()；for(设I=0；我1000000；i ) { let doc=new DOMParser()。parseFromString(模板，‘text/html’)；let div=doc.firstChild} console . log(date . now()-start)；} create document(' hello ')；在55188小时内测试100万个节点的生成。

最后，测试createDocumentFragment。

函数createDocumentFragment(txt){ const template=` div class=' child ' $ { txt }/div `；让start=date . now()；for(设I=0；我1000000；I){ let frag=document . create range()。createContextualFragment(模板)；} console . log(date . now()-start)；} createDocumentFragment()；在6210小时内测试100万个节点的生成。

在这一轮测试中，createDocumentFragment方法和createNode方法具有可比性。让我们看看如何动态地将生成的DOM元素添加到文档中。

1.2.0批量添加节点

在大多数情况下，动态创建的节点会添加到文档中并显示出来。让我们介绍并比较几种常见的方案。下面我们分批添加的方法都采用了createDocumentFragment方法。

1.2.1直接追加

直接追加方法是生成一个节点并将其添加到文档中。当然，这会导致布局改变，这通常被认为是性能最差的方法。

const template=' div class=' child ' hello/div；函数createDocumentFragment(){ let frag=document . create range()。createContextualFragment(模板)；返回frag}//createDocumentFragment()；const container=document . getelementbyid(' container ')；让start=date . now()；for(设I=0；我10万；I){ container . appendchild(createDocumentFragment())；} console . log(date . now()-start)；在上面的代码中，我们计算动态添加100，000个节点。结果如下：

测试1000个节点需要20毫秒，测试10000个节点需要10001毫秒，测试100000个节点需要46549毫秒。

1.2.2文档片段

我们已经介绍了用于转换字符串的DocumentFragment。接下来，我们使用这个对象作为临时容器，一次添加多个节点。

使用document . createDocumentFragment()方法创建一个空的documentfragment对象。

const template=' div class=' child ' hello/div；函数createDocumentFragment(){ let frag=document . create range()。createContextualFragment(模板)；返回frag}//createDocumentFragment()；const container=document . getelementbyid(' container ')；让frag container=document . createdocumentfragment()；让start=date . now()；for(设I=0；i 1000I){ frag container . appendchild(createDocumentFragment())；} container . appendchild(frag container)；console . log(date . now()-start)；测试1000个节点需要25毫秒，测试10000个节点需要2877毫秒，100000个节点的浏览器卡住了。

1.3总结

简单介绍了几种方法，但没有技术含量。然而，从动态添加节点的角度来看，在线声明DocumentFragment方法的性能远优于直接追加在我的测试场景中并不成立。

DocumentFragment的正确应用场景应该是作为一个虚拟DOM容器，在这种场景中，查询被频繁修改，但不需要直接呈现。

摘要

以上就是本文的全部内容。希望本文的内容对大家的学习或工作有一定的参考价值。有问题可以留言交流。谢谢你的支持。