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>

The code for this article is available on GitHub

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

The code for this article is available on GitHub

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 code for this article is available on GitHub

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

The code for this article is available on GitHub

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 code for this article is available on GitHub

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

# Additional Resources

You can learn more about the related topics by checking out the following tutorials:

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