title: How to allow user to edit formatted text inside an HTML tag?
body: <p>I am building an app where I would like users to be able to review an existing string in a <code>&lt;p&gt;&lt;/p&gt;</code> element, <code>mouseover</code> on the text to edit it, and see the edited version when they <code>mouseout</code>.</p>
  
  <p>Right now I am doing that in Javascript replacing the <code>&lt;p&gt;</code> with <code>&lt;textarea&gt;</code>.  I populate the <code>&lt;textarea&gt;</code> by setting its <code>innerHTML</code> to that of the <code>&lt;p&gt;</code> element.  That works fine except that the text appear as HTML rather than as formatted text.</p>
  
  <p>So for example a user might have entered something like:  </p>
  
  <pre><code>"An old silent pond...
  A frog jumps into the pond,
  splash! Silence again."
  </code></pre>
  
  <p>Then when the time comes to edit the text, it would appear as:  </p>
  
  <pre><code>"An old silent pond...&lt;br&gt;A frog jumps into the pond,&lt;br&gt;splash! Silence again."
  </code></pre>
  
  <p>Is there a way to make sure that what is displayed for editing is interpreted HTML / formatted text rather than raw HTML?  I do need the formatting to be interpreted - I don't want to just strip out the HTML tags.</p>
  
  <p>PS:  I assume that <code>textarea</code> is the right way to create a window to edit some text, but I'm not married to it.</p>