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:
- Get an Element by Name attribute using JavaScript
- Add a class to the Body element using JavaScript
- Add Line breaks to a Textarea using JavaScript

Hi, I’m Cora Lopez. I have a passion for teaching programming languages such as Python, Java, Php, Javascript … I’m creating the free python course online. I hope this helps you in your learning journey.
Name of the university: HCMUE
Major: IT
Programming Languages: HTML/CSS/Javascript, PHP/sql/laravel, Python, Java