title: jQuery empty out text area then append data does not work
body: <p>I have a <code>textarea</code>, I am supposed to empty out all the data, then append a new data. I tried something like this, but it always ended up empty data. The <code>textarea</code> is just a standard <code>html</code> input:</p>
  
  <pre><code>&lt;textarea name="mytextarea" id="mytextarea" rows="8" 
  class="form-control" readonly="readonly"&gt;myOldData&lt;/textarea&gt;
  
  //This resulting in empty data
  $('#mytextarea').val('');
  $('#mytextarea').append("myData1");
  $('#mytextarea').append("myData2");
  </code></pre>
  
  <p>but if:</p>
  
  <pre><code>//This resulting in just myData1
  $('#mytextarea').val('');
  $('#mytextarea').val("myData1");
  $('#mytextarea').append("myData2");
  </code></pre>
  
  <p>case 3 is if I don't need to empty out data and just append that will work fine:</p>
  
  <pre><code>//This resulting in just myData1myData2
  $('#mytextarea').val("myData1");
  $('#mytextarea').append("myData2");
  </code></pre>
  
  <p>What is happening here?
  How can I empty out the data first, then append some new data?</p>