Bir es6 şablon dizgisini vanilya javascript kullanarak html öğesine dönüştürün

Question

Bir html şablon dizgisini bir Html öğesine dönüştürmek için düz eski vanilya javascript (çerçeve çerçevelerini) kullanmak için bir yöntem var mı?

İşte ben denedim şeyler var ne:

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

Bu uygulamanın çalıştığından ancak innerHTML kullanan ve ekstra sarılı div ekler. Ekstra div olmadan bunu yapmanın bir yolu var mı?

Answer 1

Sen insertAdjacentHTML kullanabilirsiniz: Bir şablonu dizesi bir değişken diye bir şey olmadığı için

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>

O dize değişkeni templateString demezdim. Şablon dizgileri, bir harf biçimidir, ancak değerlendirildiğinde, düz dizelerdir. Değişkende "tembellik" gibi bazı sihirli izlere sahip hiçbir şey yoktur.

Answer 2

Yeni keşfettim DomParser.

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

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