js 将html字符串转换成node节点三种方式

1、innerHTML

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

2、 DOMParser

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;
 }
  
 const container = document.getElementById('container');
 container.appendChild(createDocument('hello'));

3、 DocumentFragment

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

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