Say you have some HTML that is a string:
let string_of_html = ` <div>Cool</div> `;
Maybe it comes from an API or you’ve constructed it yourself from template literals or something.
You can use
innerHTML to put that into an element, like:
document.body.innerHTML = string_of_html; // Append it instead document.body.innerHTML += string_of_html;
You have a bit more control if you go with the
insertAdjacentHTML function as you can place the new HTML in four different places:
<!-- beforebegin --> <node> <!-- afterbegin --> text inside node <!-- beforeend --> </node> <!-- afterend -->
You use it like…
el.insertAdjacentHTML('beforebegin', string_of_html); el.insertAdjacentHTML('afterbegin', string_of_html); el.insertAdjacentHTML('beforeend', string_of_html); el.insertAdjacentHTML('afterend', string_of_html);
let dom = new DOMParser() .parseFromString(string_of_html, 'text/html');
That will give you a complete DOM, so you’ll then need to yank out the child you added. Assuming it has just one parent element, that’s like…
let dom = new DOMParser() .parseFromString(string_of_html, 'text/html'); let new_element = dom.body.firstElementChild;
Now you can mess around with that
new_element as needed, I suppose before doing what you need to do with it.
It’s a bit more straightforward to do this though:
let new_element = document.createRange() .createContextualFragment(string_of_html);
You’ll get the element directly as a document fragment to append or whatever as needed. This method is notable in that it will actually execute
<script>s it finds inside, which can be both useful and dangerous.
There is a considerable amount of nuance to all this. For example, the HTML needs to be valid. Malformed HTML just isn’t going to work. Malformed might also catch you by surprise, like putting a
<tr> into a
<table> will fail because it’s missing a
Koen Schaft write “Create a DOM node from an HTML string” that covers what we have here but in more detail and with more of the gotchas.