Konwertuj ciąg szablonu es6 na element html za pomocą wanilii javascript

Question

Czy istnieje metoda używania zwykłego starego javascript (frameworków sans) do konwersji łańcucha szablonu html w element HTML?

Oto co mam rzeczy, które próbowałem:

function renderBody(selector = body, template) { 
    const prop.text = 'foobar'; 
    const templateString = `<div id='test'>${prop.text}</div>` 
    const test = document.createElement('div'); 
    test.innerHTML = templateString; 
    document.querySelector(selector).appendChild(test); 
} 

Ta implementacja działa, ale używa innerHTML i dodaje dodatkowy zawinięty div. Czy istnieje sposób, aby to zrobić bez dodatkowego div?

Answer 1

Można użyć insertAdjacentHTML:

function renderBody(selector = 'body', template) { 
 
    const prop = { text: 'foobar' }; 
 
    const html = `<div id='test'>${prop.text}</div>`; 
 
    document.querySelector(selector).insertAdjacentHTML('beforeend', html); 
 
} 
 

 
renderBody();

div { border: 1px solid }

<h1>test</h1>

Nie nazwałbym tego łańcucha zmiennej templateString jak nie ma czegoś takiego jak zmienna, która jest ciągiem szablon. Łańcuchy szablonów są notacją dosłowną, ale podczas oceny są zwykłymi ciągami znaków. W zmiennej nie ma nic, co ma jakiś magiczny ślad "templateness".

Answer 2

Właśnie odkryłem DomParser. I to właśnie szukałem:

let doc = new DOMParser().parseFromString('<div><b>Hello!</b></div>', 'text/html'); 

kredytowe: https://davidwalsh.name/convert-html-stings-dom-nodes