contenteditable div vs textarea

contenteditable div   is more flexible comparing to textarea.  The height is adjusted automatically.
Example  of contenteditable div:
<div contenteditable='true'  id='award' class='award_name cfl_row' style= 'border: 1px solid red; min-height:70px;width:200px;border-radius: 5px;
        border-color:green;margin: 5px 0px;padding:5px 5px 5px 5px;background-color: #F5EAF7;'></div>
To get value of contenteditable div, using id and html()
$('#award').html();

Using  focusout instead of change for contenteditable div

$('.changeable').focusout(function() {
  alert('Handler for .change() called.');
});

Example of textarea:
<textarea id='award' class='comments cfl_row' cols=25 rows=2></textarea> 
To get value of textarea:
$('#award').val();
(Note $('#award').text(); works sometimes and fails other times! It's not reliable)

Rendering HTML tags inside textarea

In textarea
  var $mailform = $('<textarea id="textbody"><textarea>');
   $mailform.find('#textbody').html("Dear <br />, This is advised that...");
We found html tags br is not rendered.

To sovle this problem, we make a div editable
  var $mailform = $('<div id="textbody" class="editable"><div>');
   $mailform.find('#textbody').html("Dear <br />, This is advised that...");
   $('.editable').each(function(){
                 this.contentEditable = true;
    });
Now this div has same feature as textarea.