Append text to Textarea using JavaScript

# Table of Contents

# Append text to Textarea using JavaScript

To add text to a textarea, access the value property on the element and set it to its current value plus the text to be appended.

The value property can be used to get and set the content of a textarea element.

Here is the HTML for the examples.

index.html

Copied!
<!DOCTYPE html>
<html lang="en">
  <head>
    <title>bobbyhadz.com</title>
    <meta charset="UTF-8" />
  </head>

  <body>
    <textarea id="message" rows="5" cols="30"></textarea>

    <button id="btn">Append text</button>

    <script src="index.js"></script>
  </body>
</html>

And here is the related JavaScript code.

index.js

Copied!
const textarea = document.getElementById('message');

// ✅ Append text
textarea.value += 'Appended text';

const btn = document.getElementById('btn');

// ✅ Append text on button click
btn.addEventListener('click', function handleClick() {
  textarea.value += 'Appended text';
});

append text to textarea

We used the value property of the textarea element to append text to it.

These two lines achieve the same result.

index.js

Copied!
const textarea = document.getElementById('message');

textarea.value += 'Appended text';

textarea.value = textarea.value + 'Appended text';

Both of them append the text to the end of the current value of the textarea element.

# Append text to a textarea element on click

To append text to a textarea element on click:

Add a click event listener to an element.
Each time the element is clicked, update the value of the textarea element.

index.js

Copied!
const textarea = document.getElementById('message');

const btn = document.getElementById('btn');

// ✅ Append text on button click
btn.addEventListener('click', function handleClick() {
  textarea.value += 'Appended text';
});

The handleClick function is invoked every time the user clicks the button.

# Checking if the text is already contained in the `textarea`

You can also check if the text is already contained in the textarea, so you don't add it twice if the user clicks on the button multiple times.

index.js

Copied!
const textarea = document.getElementById('message');

const btn = document.getElementById('btn');

btn.addEventListener('click', function handleClick() {
  const text = 'Text to append';

  if (!textarea.value.includes(text)) {
    textarea.value += text;
  }
});

append text to textarea only once

We used the includes() method to check if the text we want to append is already contained in the value of the textarea.

# Checking if the value of the `textarea` ends with the text

You can also be more specific and check if the value of the textarea ends with the text.

index.js

Copied!
const textarea = document.getElementById('message');

const btn = document.getElementById('btn');

btn.addEventListener('click', function handleClick() {
  const text = 'Text to append';

  if (!textarea.value.endsWith(text)) {
    textarea.value += text;
  }
});

The endsWith() method checks if the string the method was called on ends with the provided string.

I wrote a book in which I share everything I know about how to become a better, more efficient programmer.

You can use the search field on my Home Page to filter through all of my articles.

Append text to Textarea using JavaScript

# Table of Contents