将HTML字符转化为DOM结点

最新推荐文章于 2024-08-16 16:46:35 发布

IamSmaLLR.

最新推荐文章于 2024-08-16 16:46:35 发布

阅读量598

点赞数

分类专栏： HTML问题 JavaScript问题

本文链接：https://blog.csdn.net/weixin_45284354/article/details/113921635

版权

JavaScript问题同时被 2 个专栏收录

65 篇文章 1 订阅

订阅专栏

HTML问题

10 篇文章 0 订阅

订阅专栏

本文详细介绍了如何使用JavaScript动态创建HTML节点：1)通过innerHTML属性；2)利用DOMParser解析字符串为文档对象；3)使用DocumentFragment。这些方法在网页动态更新和构建DOM树时非常实用。

摘要由CSDN通过智能技术生成

使用HTML字符串动态创建Node

1使用innerHTML

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

        function createNode(txt) {
            const template = `<div class='child'>${txt}</div>`;
            let tempNode = document.createElement('div');
            tempNode.innerHTML = template;
            return tempNode.firstChild;
        }
		document.body.appendChild(createNode('hello'));

2 使用DOMParser

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

  function createDocument(txt) {
            const template = `<div class='child'>${txt}</div>`;
            let doc = new DOMParser().parseFromString(template, 'text/html');
            let div = doc.querySelector('.child');
            return div;
        }
        document.body.appendChild(createDocument('hello'));

3 使用DocumentFragment

DocumentFragment 对象表示一个没有父级文件的最小文档对象。它被当做一个轻量版的 Document 使用，用于存储已排好版的或尚未打理好格式的XML片段。最大的区别是因为DocumentFragment不是真实DOM树的一部分，它的变化不会引起DOM树的重新渲染的操作(reflow) ，且不会导致性能等问题。

利用document.createRange().createContextualFragment方法，我们可以直接将字符串转化为DocumentFragment对象。

 function createDocumentFragment(txt) {
            const template = `<div class='child'>${txt}</div>`;
            let frag = document.createRange().createContextualFragment(template);
            return frag;
        }
        document.body.appendChild(createDocumentFragment('hello'));