How to Change the Content of a textarea Using JavaScript

The “<textarea>” is a well-reputed HTML element that allows multiple lines of text inputs. It is commonly used in forms for collecting unlimited lengths of user input in the form of comments/reviews. However, its size can also be specified with the help of the “cols” and “rows” attributes. Apart from its size, the user can also customize its content once it is created. It helps to update the text input as per the user’s requirements at any time.

This guide will explain all the possible approaches to changing the content of a “<textarea>” using JavaScript.

How to Change the Content of a <textarea> Using JavaScript?

JavaScript offers the following built-in properties to change the content of a “<text area>”:

• Using the “innerHTML” Property.
• Using the “value” Property.
• Using the “innerText” Property.

The stated methods will now be demonstrated one by one.

HTML Code

First, have a look at the following HTML code:

In the above lines of code:

• The “<h2>” tag defines the subheading.
• Next, the “<textarea>” tag creates an input text that needs to be changed.
• After that, the “<br>” tags break the line.
• Lastly, the “<button>” tag adds a button attached with an “onclick” event that redirects to the function “chngContent()” upon the button click.

Note: This HTML code will follow throughout this guide.

Method 1: Change the Content of a <textarea> Using the “innerHTML” Property

The “innerHTML” property utilizes the “<textarea>” element’s “id” attribute for changing its content. Let’s apply this concept to change the content of the initialized “<textarea>”.

JavaScript Code

Go through the following JavaScript code:

The above code snippet utilizes the “innerHTML” property to fetch the “<textarea>” content through its “id” and changes it with newly assigned content.

Output

As analyzed, the value of specified “<textarea>” is changed upon the button click.

Method 2: Change the Content of a <textarea> Using the “value” Property

The “value” is another property that can be applied to change the content of the “<textarea>” element as per the user’s requirements.

JavaScript Code

The following JavaScript explains the discussed concept practically:

In this code block:

• Define a function named “chngContent()”.
• In its definition, declare the variable “t” of data type “var” that utilizes the “getElementById()” method to access the “<textarea>” element via its id “textID”.
• Lastly, attach the “value” property to change the “<textarea>” content with the stated statement.

Output

As seen, the content of the given “<textarea>” has been changed upon button click via the “value” property.

Method 3: Change the Content of a <textarea> Using the “innerText” Property

The “innerText” property allows the user to set or return the specified HTML node and its children. It can also be implemented to change the “<textarea>” content.

JavaScript Code

The following JavaScript code shows its practical implementation:

In the above lines of code, the “innerText” property accesses the “<textarea>” content via its id “textID” to change its content to the specified/allocated one.

Output

As seen, the specified “<textarea>” content has been changed with the new statement accordingly.

Conclusion

JavaScript provides the “value”, “innerHTML”, or the “innerText” properties for changing the content of the HTML “<textarea>” element. All these methods use the id attribute of the “<textarea>” element to change its content with the provided text statement. This guide has provided a brief description of changing the content of a <textarea> using JavaScript.