title: Handling a input with HTML inside its value (using jQuery)
body: <p>I created a small function similar to a edit-in-place plugin.</p>
  
  <p>What it does:</p>
  
  <ul>
  <li>gets the html content of a element on click: <code>var editable = $(this).html();</code></li>
  <li><p>creates the text input field (or gets it if it exists):</p>
  
  <pre><code>var input = ($('input', this).length &gt; 0) ? $('input', this) : $('&lt;input type="text" value="' + editable + '" /&gt;'),
  </code></pre></li>
  <li><p>replaces the element text with the input: <code>$(this).empty().append(input);</code></p></li>
  </ul>
  
  <p>This works but only if the editable text doesn't contain non-encoded HTML characters.</p>
  
  <p>If it has HTML characters like <code>&lt;</code> <code>&gt;</code>, they get converted in the 2nd step to HTML code, and mess up the input element...</p>
  
  <p>I tried to escape them by using:</p>
  
  <p><code>editable = $('&lt;div/&gt;').text($(this).html()).html()</code></p>
  
  <p>but then I get a text input with escaped HTML lol :)</p>
  
  <p>What can I do?</p>