Open In App

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

Last Updated : 12 Jul, 2025
Comments
Improve
Suggest changes
Like Article
Like
Report

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.

R
Rajnis09
Improve
Article Tags :

Explore

Lightbox