Parse String as HTML in JavaScript

Question

So, I have a textarea that users are supposed to type codes into.

Ex: <div id="example">blar</div>

How can I evaluate what they enter in the textarea as HTML (as in the DOM) without:

jQuery
Having to create a new element

For example:

Code: <div id="ex">Blar</div>

My Function:

function parseCode(){
    var code = document.getElementById("code").value;
}

I want to take the value and make it accessible (like code.getElementsByTagName("div")[0].innerHTML);

Why the arbitrary-seeming restriction of not creating a new element? — Phrogz
– Phrogz, Commented May 25, 2012 at 5:30
Well, I guess I can create one, kinda with what Chris was saying. Isn't there something like document.evalute? — RickyAYoder
– RickyAYoder, Commented May 25, 2012 at 5:34
The innerHTML property is about a good as it gets; you just need a parent element to use. When you set an element's innerHTML property to an HTML string, the string gets parsed and the element gets populated with the result. — apsillers
– apsillers, Commented May 25, 2012 at 5:40

Chris · Accepted Answer · 2012-05-25 05:32:27Z

2

var ele = document.createElement('div');
ele.innerHTML = document.getElementById('code').value;

This does not create a new element on the page itself, only in memory

answered May 25, 2012 at 5:32

Chris

28.1k26 gold badges132 silver badges227 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

RickyAYoder Over a year ago

And if I assigned it a className/id, I could access it and each of the children as what the user typed as their code, no?

Chris Over a year ago

Yes, the html is evaluated when you assign it to the container's innerHTML property. All of the nodes defined in the user submitted HTML become actual child nodes of the newly created div, again, all in memory.

Amogh Talpallikar Over a year ago

Nice! concise. I didn't think of it :P

Collectives™ on Stack Overflow

Parse String as HTML in JavaScript

1 Answer 1

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related