将html代码转换为dom,将HTML字符转换为DOM节点并动态添加到文档中

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

将字符串动态转换为DOM节点，在开发中经常遇到，尤其在模板引擎中更是不可或缺的技术。

字符串转换为DOM节点本身并不难，本篇文章主要涉及两个主题：

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

2 动态生成的DOM节点添加到文档中的方法及性能测试

本文的示例： 有如下代码段

Document

复制代码

任务是编写一个JavaScript函数，接收一个文本内容，动态生成一个包含该文本的div，返回该Node。

1.1 动态创建Node

1.1.1 innerHTML

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

const template = `

${txt}

`;

let tempNode = document.createElement('div');

tempNode.innerHTML = template;

return tempNode.firstChild;

}

const container = document.getElementById('container');

container.appendChild(createNode('hello'));

复制代码

下面我们看第二种方法

1.1.2 DOMParser

DOMParser 实例的parseFromString方法可以用来直接将字符串转换为document 文档对象。有了document之后，我们就可以利用各种DOM Api来进行操作了。

function createDocument(txt){

const template = `

${txt}

`;

let doc = new DOMParser().parseFromString(template, 'text/ht