वेनिला जावास्क्रिप्ट

Question

का उपयोग करके एक ईएस 6 टेम्पलेट स्ट्रिंग को HTML तत्व में कनवर्ट करें क्या एक HTML टेम्पलेट स्ट्रिंग को एचटीएमएल तत्व में परिवर्तित करने के लिए सादे पुराने वेनिला जावास्क्रिप्ट (सैन्स फ्रेमवर्क) का उपयोग करने का कोई तरीका है?

यहाँ मैं क्या चीजें हैं जो मैं कोशिश की है है या नहीं:

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

इस कार्यान्वयन काम करता है, लेकिन यह innerHTML का उपयोग करता है और एक अतिरिक्त लिपटे div कहते हैं। अतिरिक्त div के बिना ऐसा करने का कोई तरीका है?

Answer 1

आप 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>

मुझे लगता है कि स्ट्रिंग चर templateString फोन नहीं होगा के रूप में वहाँ एक चर एक टेम्पलेट स्ट्रिंग है कि जैसी कोई चीज नहीं है। टेम्पलेट तार एक शाब्दिक संकेत हैं, लेकिन जब मूल्यांकन किया जाता है, तो वे सादे तार होते हैं। वेरिएबल में कुछ भी नहीं है जिसमें "templateness" का कुछ जादुई निशान है।

Answer 2

मैंने अभी DomParser खोजा है।

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

क्रेडिट: https://davidwalsh.name/convert-html-stings-dom-nodes