将HTML字符转化为DOM结点

使用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'));