How to remove Objects from Associative Array in JavaScript ?

JavaScript – How to Change the Content of a <Textarea> ?

Last Updated : 17 Apr, 2025

Here are the various methods to change the content of a textarea using JavaScript.

1. Using value Property

The value property is the most common method to change or retrieve the content of a <textarea>.

HTML

<textarea id="myTextarea">Initial content</textarea>
<button onclick="changeContent()">Change Content</button>

<script>
	function changeContent() {
        const textarea = document.getElementById("myTextarea");
        textarea.value = "New content using value property!";
    }
</script>

Output

change-content-value-property

Change the Content of a Textarea using JavaScript

2. Using innerHTML Property

While innerHTML is not typically used for <textarea>, it can modify its content when treated as a standard HTML element.

HTML

<textarea id="myTextarea">Initial content</textarea>
<button onclick="changeContent()">Change Content</button>

<script>
    function changeContent() {
        const textarea = document.getElementById("myTextarea");
        textarea.innerHTML = "New content using innerHTML!";
    }
</script>

Output

change-content-using-innerHTML

Change the Content of a Textarea using JavaScript

3. Using innerText Property

Similar to innerHTML, this property modify the visible text of the <textarea>.

HTML

<textarea id="myText">Initial content</textarea>
<button onclick="changeText()">Change Content</button>

<script>
    function changeText() {
        const textarea = document.getElementById("myText");
        textarea.innerText = "New content using innerText!";
    }
</script>

Output

change-content-using-innerText

Change the Content of a Textarea using JavaScript

4. Using Event Listeners for Dynamic Updates

You can use event listeners to change the content interactively.

HTML

<textarea id="myText">Initial content</textarea>
<button id="updateButton">Change Content</button>

<script>
    document.getElementById("updateButton").addEventListener("click", () => {
        const textarea = document.getElementById("myText");
        textarea.value = "Content updated using event listeners!";
    });
</script>

Output

change-content-using-eventListeners

Change the Content of a Textarea using JavaScript

Which approach to choose?

value Property: Most common and versatile.
innerHTML/innerText: Rarely used for <textarea>; more suited for other elements.
Event Listeners: Best for dynamic and interactive updates.

How to remove Objects from Associative Array in JavaScript ?

R

Rajnis09

Improve

Article Tags :

Similar Reads

How to change the shape of a textarea using JavaScript ?

In General, Textarea will be in the form of rectangular or square shapes, but here we will deal with Unusual shapes of textarea which means this textarea will not be regular shapes but editable. Method 1: In the first method, let's see the irregular editable textarea created using CSS-shapes and con

How to change the text of a label using JavaScript ?

Changing the text of a label using JavaScript involves selecting the label element and updating its textContent or innerHTML property. This allows you to modify the displayed text dynamically, often in response to user interactions or changes in data, enhancing interactivity and responsiveness. Belo

How to load the contents of a text file into a JavaScript variable?

In this article, we will examine how to read the contents of any text file that exists on your computer into a variable using JavaScript. The following are a few basic pointers that everybody should brush through before looking at the code: Event listeners: These are predefined functions that exist

JavaScript Change the Text of a Span Element

Updating the text of HTML elements, such as a <span> in JavaScript allows developers to dynamically alter webpage content. This technique is used for creating interactive web features like displaying user feedback, updating real-time data, or modifying elements based on user actions. Here, we'

How to Get the Content of an HTML Comment using JavaScript ?

In this article, we will learn how to get the content of an HTML Comment Using Javascript. Comments are a best practice in programming and software development. In general, they can explain why a coding decision was made or what needs to be done to improve the code you're working on. HTML tags (incl

JavaScript Get the text of a span element

We are given an HTML document and the task is to get the text of an <span> element. Below are the methods to get the text of a span element using JavaScript: Table of Content HTML DOM textContent PropertyHTML DOM innerText PropertyHTML DOM textContent PropertyThis property set/return the text

How to change style/class of an element using JavaScript ?

In this article, we will learn how we can change the style/class of an element. If you want to build a cool website or app then UI plays an important role. We can change, add or remove any CSS property from an HTML element on the occurrence of any event with the help of JavaScript. There are two com

How to make a word count in textarea using JavaScript ?

Counting words may be useful in scenarios where the user is recommended to enter a certain number of words and the word counter can keep track of the same. Below are approaches to make a word count in textarea using JavaScript: Table of Content Calculating the number of spaces present in the textSep

How to get/change the HTML with DOM element in JavaScript ?

In order to get/access the HTML for a DOM element in JavaScript, the first step is to identify the element base on its id, name, or its tag name. Then, we can use inner.HTML or outer.HTML to get the HTML. Using the getElementById() method: This method gets/identifies the DOM elements using its ID an

How to change the text and image by just clicking a button in JavaScript ?

The image and text can be changed by using JavaScript functions and then calling the functions by clicking a button.Â We will do that into 3 sections., in the first section we will create the structure by using only HTML in the second section we will design minimally to make it attractive by using si