// 每日前端夜话 第398篇
// 正文共:1400 字
// 预计阅读时间:6 分钟
将字符串动态转换为DOM节点,在开发中经常遇到,尤其在模板引擎中更是不可或缺的技术。字符串转换为DOM节点本身并不难,本篇文章主要涉及两个主题:
❝1 字符串转换为HTML DOM节点的基本方法及性能测试
2 动态生成的DOM节点添加到文档中的方法及性能测试
❞
本文的示例:有如下代码段
html>
"en">
"UTF-8">
"viewport" content="width=device-width, initial-scale=1.0">
"X-UA-Compatible" content="ie=edge">
Document
'container'>
任务是编写一个JavaScript函数,接收一个文本内容,动态生成一个包含该文本的div,返回该Node。
1.1 动态创建Node
1.1.1 innerHTML
第一种方法,我们使用document.createElement方法创建新的元素,然后利用innerHTML将字符串注入进去,最后返回firstChild,得到动态创建的Node。
下面我们看第二种方法
1.1.2 DOMParser
DOMParser 实例的parseFromString方法可以用来直接将字符串转换为document 文档对象。有了document之后,我们就可以利用各种DOM Api来进行操作了。
function createDocument(txt) {
const template = `