1. innerHTML

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

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 對象表示一個沒有父級文件的最小文檔對象。
它被當(dāng)做一個輕量版的 Document 使用，用于存儲已排好版的或尚未打理好格式的XML片段。
最大的區(qū)別是因?yàn)镈ocumentFragment不是真實(shí)DOM樹的一部分，它的變化不會引起DOM樹的重新渲染的操作(reflow) ，且不會導(dǎo)致性能等問題。

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

原文鏈接：神奇大叔-CSDN