Generally, I would recommend avoiding directly setting the innerHTML property, since it's vulnerable to XSS and other injection attacks. If you do, make sure yo

Generally, I would recommend avoiding directly setting the innerHTML property, since it's vulnerable to XSS and other injection attacks. If you do, make sure you HTML-escape each variable you interpolate. Here's a way to do that with a tagged template function (named it `htmlFragment` to make it super clear what it's for): // a couple of functions to help const sanitizeHTML = (unsafeStr) => { const div = document.createElement('div'); div.textContent = unsafeStr; return div.innerHTML; }; const htmlFragment = (fragments, ...variables) => { const result = variables.map((variable, i) => fragments[i] + sanitizeHTML(variable)); result.push(fragments[fragments.length-1]); return result.join(''); }; // updated your code here const div = document.createElement('div'); let text = 'This is a dynamically generated paragraph'; div.innerHTML = htmlFragment` <div id="container" class="my-class"> <h1>Hello world</h1> <p>${text}</p> </div> `; document.body.append(...div.children); Unfortunately, to my knowledge there isn't yet a close-to-the-metal solution for templating and data binding in HTML/JS, although several proposals are currently being discussed.