How To Append Text To Textarea Using JavaScript?

Posted on by Cora Lopez
Append text to Textarea using JavaScript

The HTML <textarea> tag is used to define a multiline text input field. Long text can be entered and displayed with it. So how to append text to textarea using JavaScript? Continue reading the article to know.

Four ways to append text to textarea using JavaScript

We will guide you through the following 4 ways:

Using value property

We have already introduced you to the syntax of the value property. You can read it in this article.

Appending text to textarea is very simple, get the textarea element and perform the += operation on its value property.

To make the example more intuitive, let’s do a simple but very cool effect that appends text on a button click:

Index.html:

<body>
  <main id="app">
    <textarea class="text-area" rows="10">Hello, this is</textarea>
    <button class="btn">Click to append text</button>
  </main>
  <script src="main.js"></script>
</body>

Main.js:

// Get textarea and button elements
const textArea = document.querySelector("textarea");
const btn = document.querySelector(".btn");

// Click to append text to the textarea
btn.addEventListener("click", () => {

  // Insert text to the textarea using the value property
  textArea.value += " learnshareit.com";

});

Output:

Using textContent property

To learn more about the syntax of the textContent property, you can read more here.

Like the above, we will use textContent to append text to textarea by performing string concatenation of the textContent property with the text we want to append. Like this:

// Get textarea and button elements
const textArea = document.querySelector("textarea");
const btn = document.querySelector(".btn");

// Click to append text to the textarea
btn.addEventListener("click", () => {

  // Insert text to the textarea using the textContent property
  textArea.textContent += " learnshareit.com";

});

Output:

Using append() function

Syntax:

append(param1, param2, ...);

Parameters:

  • param1, param2, …: the strings you want to append.

Append() will insert Node objects or string objects after the element calling it.

We can use append() to append text to textarea by calling it on the textarea element. Like this:

// Get textarea and button elements
const textArea = document.querySelector("textarea");
const btn = document.querySelector(".btn");

// Click to append text to the textarea
btn.addEventListener("click", () => {

  // Insert text to the textarea using append() function
  textArea.append(" a nice", " day!");

});

Output:

Specify the text to append

This time, we’re going to do a more complex example. We’ll use the Event.target of the click event. To specify the text to be appended to the textarea. The target attribute of the click event will point to the element being clicked, so we can quickly get the value of that object using the textContent property. Look closely at the example below to understand better:

Index.html:

<body>
  <main id="app">
    <textarea class="text-area" rows="10">Visit learnshareit.com to learn: </textarea>
    <div class="btn-group">
      <button class="btn btn--primary" id="btn1">JavaScript</button>
      <button class="btn btn--secondary" id="btn2">Python</button>
    </div>
  </main>
  <script src="main4.js"></script>
</body>

Main4.js:

// Get textarea and button group elements
const textArea = document.querySelector("textarea");
const btnGroup = document.querySelector(".btn-group");

// Click to append text to the textarea
btnGroup.addEventListener("click", (e) => {

  // Use e.target to specify the text to append
  textArea.value += e.target.textContent;

});

Output:

Summary

In summary, there are so many ways to append text to Textarea using JavaScript that it’s impossible to list them all in one article. If you have a better way, please share it below.

Have a great day!

Maybe you are interested:

Related Posts

Leave a Reply

Your email address will not be published. Required fields are marked *