TheJSCoder TheJSCoder - 6 months ago 17
Javascript Question

JavaScript - Use innerHTML as actual html instead of plain text

When I'm trying to change

document.documentElement.innerHTML
using the
innerHTML
of a textarea like this:

document.documentElement.innerHTML = document.querySelector('#mytextarea').innerHTML


The
innerHTML
of
#mytextarea
is not used as actual HTML to change the DOM, but as plain text.

For example: if the
innerHTML
of
#mytextarea
is
<p>A paragraph</p>
.

Then the document after loading looks like:
<p>A paragraph</p>
instead of
A paragraph


How should I do it so the value inside the
#mytextarea
could be used to change the DOM? (ex. appending new elements)

Answer

Use .value to get the contents of a textarea without it being encoded.

document.getElementById("documentElement").innerHTML = document.querySelector('#mytextarea').value;
<textarea id="mytextarea">
<p>A paragraph</p>
</textarea>
<div id="documentElement">

</div>