show html output in textarea instead of HTML code

Question

If I have a textarea including some HTML code, how can I write a JavaScript function to show the HTML output instead of HTML code itself, for example:

<textarea id="mytextarea">
<table border=1><tr><td>cellone</td>td>celltwo</td></tr></table
</textarea>
<input type=button onclick="HTMLoutput();"/>

<script>
HTMLoutput()
{
//Code to show html output instead of html code in textarea
}
</script>

How can I do this? What is the suggested code to write inside the HTMLoutput()?

possible duplicate of How can I show HTML formatting inside a textarea? — DevlshOne
– DevlshOne, Commented Oct 18, 2013 at 3:23

Claudio Santos · Accepted Answer · 2013-10-18 03:33:47Z

1

So to convert the the html code to a formated html you need to do:

$('resultDiv').append($('<div/>').html($('.txtArea').val()+"<br>");

here's an example that use div with contentEditable set to true.

edited Oct 18, 2013 at 3:33

answered Oct 18, 2013 at 3:28

Claudio Santos

1,31713 silver badges22 bronze badges

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

Comments

SLaks · Accepted Answer · 2013-10-18 03:22:33Z

1

It sounds like you're asking how to take some HTML and display its rendered result in your document.

That's exactly what the innerHTML property does.
Simply pick a DOM element to display the result in, and set its innerHTML to the HTML to display.

answered Oct 18, 2013 at 3:22

SLaks

891k182 gold badges1.9k silver badges2k bronze badges

3 Comments

user2888402 Over a year ago

i want to build an editor and to show the rendered result inside the textarea itself as a preview

SLaks Over a year ago

@user2888402: <textarea> can only show plain text. You can use CSS to show a preview on top of the textbox.

user2888402 Over a year ago

thanks @Slaks can you please give me an example how to do this using CSS?

Collectives™ on Stack Overflow

show html output in textarea instead of HTML code

2 Answers 2

Comments

3 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

3 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related