javascript - jQuery empty out text area then append data does not work -

i have textarea, supposed empty out data, append new data. tried this, ended empty data. textarea standard html input:

<textarea name="mytextarea" id="mytextarea" rows="8"  class="form-control" readonly="readonly">myolddata</textarea>  //this resulting in empty data $('#mytextarea').val(''); $('#mytextarea').append("mydata1"); $('#mytextarea').append("mydata2"); 

but if:

//this resulting in mydata1 $('#mytextarea').val(''); $('#mytextarea').val("mydata1"); $('#mytextarea').append("mydata2"); 

case 3 if don't need empty out data , append work fine:

//this resulting in mydata1mydata2 $('#mytextarea').val("mydata1"); $('#mytextarea').append("mydata2"); 

what happening here? how can empty out data first, append new data?

if attempting set value. build out string want put in text area set @ once.

i.e.

var newstring = 'mydata1'; newstring += 'mydata2';  $('#mytextarea').val(newstring); 

.append() used appending dom elements parent dom element