title: jQuery add list with images instead of text characters when typing
body: <p>I have an <code>input</code> and when I'm typing, let's say: <strong>a</strong>, I want the result to be <code>&lt;li class="a"&gt;&lt;img src="a.png" /&gt;</code> if is <strong>space</strong> => <code>&lt;li class="space"&gt;&lt;/li&gt;</code>.
  This list appends to <code>ul.text</code>.</p>
  
  <p>Also when I press <strong>backspace</strong> I need the last item to be removed.</p>
  
  <p>I have this untill now, but I can't make it work:</p>
  
  <pre><code>$('input').live('keyup', function(e){
      this.value = this.value.toUpperCase();
      var pressedLetter = $(this).val().toLowerCase();
      $('ul.text').append('&lt;li&gt;&lt;img src="letters/'+pressedLetter+'.png" alt="" /&gt;&lt;/li&gt;');
  });
  </code></pre>
  
  <p>Any help, please?
  Thanks.</p>