How to append text to Textarea using JavaScript

Sometimes we don't want to change the content of a textarea, but we want to append some content to the end of the content value of that textarea. So this is what we will do in this example.

To append text to textarea ,we will use value property (The innerHTML property can be used ) and we must set the current value of the textarea plus the text to be appended.

function changeText(){ 
  document.getElementById("my-textarea").value += "This text is appended.";
}

Append text to textarea to a new line.

Many times the text may need to be added to a new line. So it is good to know. Where you want to break the line use \n character.

<textarea id="my-textarea" cols="40" rows="6"></textarea>
<script>
function appendText(){ 
  document.getElementById("my-textarea").value += "\nAppended text.";
 }</script>

Add text to textarea using innerHTML property.

<textarea id="my-textarea" cols="40" rows="6"></textarea>
<button id="btn">Click Me</button>
 <script>
 document.getElementById("btn").addEventListener('click', () => {
  document.getElementById("my-textarea").innerHTML += '  Appended text';
 });
</script>