Live preview and HTML

Question

Well I have the live preview of text going using jQuery.

http://jsbin.com/ezuta4

But is there a way where I can put in HTML tags and the HTML won't show but effects the text? Like typing <h1> and the tags turn into headings?

So far:

   $(document).ready(function(){

  $('#text').keypress(function() {
  $('#live').text($(this).val());
  });
}); // end jQuery 
​

Answer 1

text() will parse anything you enter as literal characters. To allow HTML code, use

  $('#live').html($(this).val());

http://jsbin.com/ezuta4/2

Answer 2

use .html() instead of .text()

Answer 3

Use .html() instead of .text(). This won't escape what you type. Also use .keyup() instead of .keypress(), or else the last character you press won't show until you press something else, the event will happen before the character is rendered.

$('#text').keyup(function() {
    $('#live').html($(this).val());
});

jQuery reference

• .html
• .text
• keyup
• keypress