Search code examples
javascripthtmlinnerhtml

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)

Solution

  • 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>