textarea.append() stops working after manually typing in it

Question

I managed to narrow it down to a very small fiddle:

Basically when you click on 'append' it should add an "X" to the textarea. That works great, until I decide to focus the textarea and type some stuff manually. Then I can't append X anymore.

Tested in Chrome and Firefox. What am I doing wrong?

HTML:

<div id="append">append</div>
<textarea id="text"></textarea>

JQuery:

$(function(){
    $(document).on('click', '#append', function(){
    $('#text').append(" X");
  });
});

Possible duplicate of [How to append text to ''?](https://stackoverflow.com/questions/6734579/how-to-append-text-to-textarea) — tao, Aug 09 '18 at 12:18

score 6 · Accepted Answer · answered Aug 09 '18 at 12:11

You need to use val instead:

$(function(){
 $(document).on('click', '#append', function(){
   $('#text').val($('#text').val() + " X");
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="append">append</div>

<textarea id="text"></textarea>

score -1 · Answer 2 · answered Aug 09 '18 at 12:15

Updated fiddle at https://jsfiddle.net/wn7aLf3o/21/. You don't have to append an element in a textrarea. Append is used to add an HTML element, however you want to modify the text of textarea, so use Val().

$(function(){
    $(document).on('click', '#append', function(){
    $('#text').val( $('#text').val() + " X") ;
  });
});

textarea.append() stops working after manually typing in it

2 Answers2