vue动态添加html标签_将HTML字符转换为DOM并动态添加到页面

最新推荐文章于 2024-01-30 10:52:19 发布

VIP文章 weixin_39724382

最新推荐文章于 2024-01-30 10:52:19 发布

阅读量7.2k

点赞数 1

文章标签： vue动态添加html标签动态修改 webconfig 节点constring

// 每日前端夜话 第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

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

下面我们看第二种方法

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

  function createDocument(txt) {
     
            const template = `

关注