JQuery. Why can't I insert an html img tag in a textarea?

Question

TextArea looks like:

<textarea id="MessageContent" name="MessageContent"></textarea>

JQuery looks like:

 $("#insert").live("click", function () {
             var t = "<img width='" + result.width + "' height='" + result.height + "' alt='" + result.descr + "' src='/Images/" + result.message + "' />";
             $("#MessageContent").html($("#MessageContent").html() + t);
             $("#MessageContent").focus();

             $("#backgroundPopup").fadeOut("fast");
             $("#popupContact").fadeOut("fast");
         });      //live

I can insert simple text, but can't insert any HTML tag.

Answer 1

You want to use .val() here instead of .html() to set a <textarea>'s value (otherwise the value isn't encoded, or used properly), like this:

$("#insert").live("click", function () {
  var t = "<img width='" + result.width + "' height='" + result.height + "' alt='" + result.descr + "' src='/Images/" + result.message + "' />";
  $("#MessageContent").val($("#MessageContent").val() + t);
  $("#MessageContent").focus();

  $("#backgroundPopup").fadeOut("fast");
  $("#popupContact").fadeOut("fast");
});

You can also shorten it a bit by passing a function to .val(), like this:

$("#insert").live("click", function () {
  $("#MessageContent").val(function(i, val) {
     return val + "<img width='" + result.width + "' height='" + result.height + "' alt='" + result.descr + "' src='/Images/" + result.message + "' />";
   }).focus(); 
  $("#backgroundPopup").fadeOut("fast");
  $("#popupContact").fadeOut("fast");
});