How to echo an image with jquery

Question

I have this code and I would like to modify it if possible to echo an image instead of the "is / not available" text. I'd also like to get rid of the button and use a onkeyup or something close to it so the user has real time notification. Can someone please help me to make these changes?

  $(document).ready(function() {
      $("#btnUsername").click(function() {
          var name = $("#txtUsername").val();
          var status = $("#divStatus");
          status.html("Checking....").removeClass();
          $.post("1.php", { username: name },
          function(data) {
              if (data == "true") {
                  status.html(name + " Is Available!").addClass("green");
              } else {
                  status.html(name + " Is Not Available!").addClass("red");
              }
          });
      });
  });

Answer 1

...
status.html(name + "<img src='unavailable.png' />").addClass("red");
...

Answer 2

You could have your 1.php return JSON, which would then be placed in the data object in your callback method. One of the JSON properties could be the url/path to the image which you could add to the screen.. your callback could look something like:

function(data) {
    if (data) {
        status.html($("<img/>").attr("src", data.image_path));
    } else {
        status.html(name + " Is Not Available!").addClass("red");
    }
});

I'm not sure what your 1.php is doing so I'm not sure if this is feasible, but this is how I would do it..

EDIT Unless you had an image you wanted to display (like if its always the same "Success/Fail" image, you could just include the path rather than having your 1.php return it)

As for changing the click thats just a matter of changing

  $("#btnUsername").click(function() {

to

  $("#btnUsername").keyup(function() {