Convert a es6 template string to html element using vanilla javascript

Question

Is there a method to use plain old vanilla javascript (sans frameworks) to convert a html template string into a Html element?

Here's what i've things that i've tried:

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

This implementation works but it uses innerHTML and adds an extra wrapped div. There a way to do that without the extra div?

Why don't you just .appendChild(templateString) and remove the 'test' references — Steveo
– Steveo, Commented Feb 21, 2017 at 16:16
Or just do const test = document.createElement('div'); test.innerHTML = prop.text; No string interpolation needed... — Heretic Monkey
– Heretic Monkey, Commented Feb 21, 2017 at 16:17
Are you sure that prop.text is allowed to contain arbitrary html? — Bergi
– Bergi, Commented Feb 27, 2017 at 22:58

trincot · Accepted Answer · 2017-02-21 18:30:14Z

You can use 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>

I would not call that string variable templateString as there is no such thing as a variable that is a template string. Template strings are a literal notation, but when evaluated, they are plain strings. There is nothing in the variable that has some magical trace of "templateness".

vsync · Accepted Answer · 2018-06-12 21:13:27Z

16

I just discovered DomParser. And that's what i was looking for:

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

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

edited Jun 12, 2018 at 21:13

vsync

133k59 gold badges344 silver badges430 bronze badges

answered Feb 27, 2017 at 22:29

chrisl-921fb74d

23.5k29 gold badges88 silver badges116 bronze badges

1 Comment

Tommy Over a year ago

A snippet to get the element: const domParse = (hmtl) => new DOMParser().parseFromString(html, "text/html").body.firstChild

Collectives™ on Stack Overflow

Convert a es6 template string to html element using vanilla javascript

2 Answers 2

Comments

1 Comment

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

1 Comment

Linked

Related