The curious case of a textarea

I came across this little problem today, where I wanted the modified content of a textarea.

This is the textarea:

<textarea id="area">Some text</textarea>

I wanted to edit it, and then alert the result. But guess what, the alerted text said “Some text” and not “Edited text”

The following code was tried:

alert($('#area').text());
alert($('#area').html());
alert(document.getElementById('area').innerHTML);

The answer was really simple after some minutes of trying, but the question why still remains.

This does the trick:

alert(document.getElementById('area').value);
alert($('#area').val());

Leave a comment