Open In App

How to change the Content of a textarea using JavaScript ?

Improve
Improve
Like Article
Like
Save
Share
Report

To change the content of an <textarea> element with the help of JavaScript, we use DOM manipulation for this with some inbuilt DOM manipulation methods.

Methods to change the Content of the text Area:

Method 1: JavaScript .value method

This method uses the id attribute of textarea with value property to change the content of <textarea> element. JavaScript code is written within the <script> tag.

Example: This example uses the above approach to change the Content of a textarea using JavaScript.

HTML




<!DOCTYPE html>
<html lang="en">
    <head>
        <title></title>
        <meta charset="UTF-8" />
        <meta
            name="viewport"
            content="width=device-width, initial-scale=1"
        />
    </head>
    <body>
        <h1 style="color: green">GeeksforGeeks</h1>
        <h3>
            How to change the Content of a textarea with
            JavaScript?
        </h3>
        <textarea id="textArea">
        A Computer Science Portal
    </textarea>
        <br /><br />
        <button onclick="changeContent()">
            Click to change
        </button>
 
        <script>
           
            // JavaScript code to change
            // the content of <textarea>
            function changeContent() {
                let x = document.getElementById("textArea");
                x.value = "GeeksforGeeks";
            }
        </script>
    </body>
</html>


Output: 

Change the Content of a textarea 

Method 2: JavaScript .innerHTML method

This method uses the id attribute of the textarea with innerHTML property to change the content of <textarea> element. JavaScript code is written within the <script> tag.

Example: This example uses the above approach to change the Content of a textarea using JavaScript.

HTML




<!DOCTYPE html>
<html lang="en">
    <head>
        <title></title>
        <meta charset="UTF-8" />
        <meta
            name="viewport"
            content="width=device-width, initial-scale=1"
        />
    </head>
    <body>
        <h1 style="color: green">GeeksforGeeks</h1>
        <h3>
            How to change the Content of a textarea with
            JavaScript?
        </h3>
        <textarea id="textArea">
            A Computer Science Portal
        </textarea>
        <br /><br />
        <button onclick="changeContent()">
            Click to change
        </button>
        <script>
            // JavaScript code to change
            // the content of <textarea>
            function changeContent() {
                document.getElementById(
                    "textArea"
                ).innerHTML = "GeeksforGeeks";
            }
        </script>
    </body>
</html>


Output: 

Change the Content of a textarea

Change the Content of a textarea 

Method 3: JavaScript textContent method

In this method, we are using the textContent property is used to set or return the text content of the specified node and all its descendants. 

Example: In this example, we are using the above approach to change the content text area.

HTML




<!DOCTYPE html>
<html lang="en">
    <head>
        <title></title>
        <meta charset="UTF-8" />
        <meta
            name="viewport"
            content="width=device-width, initial-scale=1"
        />
    </head>
    <body>
        <h1 style="color: green">GeeksforGeeks</h1>
        <h3>
            How to change the Content of a textarea with
            JavaScript?
        </h3>
        <textarea id="textArea">
            A Computer Science Portal
        </textarea>
        <br /><br />
        <button onclick="changeContent()">
            Click to change
        </button>
        <script>
            // JavaScript code to change
            // the content of <textarea>
            function changeContent() {
                let x = (document.getElementById(
                    "textArea"
                ).textContent = "GeeksforGeeks");
            }
        </script>
    </body>
</html>


Output:

Method 4: Using JavaScript innerText methods

The DOM innerText Property is used to set or return the text content of a specified node and its descendants.

Example: This example demonstrates the use of the innerText property to change the text area.

HTML




<!DOCTYPE html>
<html lang="en">
    <head>
        <title></title>
        <meta charset="UTF-8" />
        <meta
            name="viewport"
            content="width=device-width, initial-scale=1"
        />
    </head>
    <body>
        <h1 style="color: green">GeeksforGeeks</h1>
        <h3>
            How to change the Content of a textarea with
            JavaScript?
        </h3>
        <textarea id="textArea">
            A Computer Science Portal
        </textarea>
        <br /><br />
        <button onclick="changeContent()">
            Click to change
        </button>
        <script>
            // JavaScript code to change
            // the content of <textarea>
            function changeContent() {
                document.getElementById(
                    "textArea"
                ).innerText = "GeeksforGeeks";
            }
        </script>
    </body>
</html>


Output:



Last Updated : 19 Jan, 2024
Like Article
Save Article
Previous
Next
Share your thoughts in the comments
Similar Reads