How can I display the HTML content of a Text Area within a DIv AS HTML content and not text?

Question

I have the following markup:

<input id="displayBuffer" type="hidden">
<textarea id="about" rows="2" name="about" cols="20" aria-hidden="true"><p>test</p></textarea>
<input type="button" onclick="javascript:
$('#displayBuffer').val($('#about').html());
$('#displayAbout').html(unescape($('#displayBuffer').val()));"
 name="Preview" value="Preview">

When the 'preview' button is clicked the div is populated with the content of the 'about' text area however it is not being encoded as HTML but it's displaying <p>test</p> when I want it to display test with whatever style I have in CSS for p.

What am I doing wrong?

Solution 1

Something like the below should do it

$('your-container').html($('#about').val());

DEMO

Hope this helps

Solution 2

Use .html() for placing content as html.

$('#show').click(function() {
    $('#Preview').html($('#about').val());
});​

http://jsfiddle.net/LCwgc/1/

Solution 3

<textarea id="about" rows="2" name="about" cols="20" aria-hidden="true"><p>test</p></textarea>
<div id='displayAbout'>ale</div>
<input type="button" id='preview' name="Preview" value="Preview">​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​

Buffer is useless:

$("#preview").click(function() {$('#displayAbout').html($('#about').val());});

Comments

[William Calleja]

Thanks mate, apparently my problem was that I was using .html() withthin the container's .html(). Using .val() as you suggested solved the problem.