How to change the Content of a textarea using JavaScript ?

In this article, we are given an HTML document containing an <textarea> element, the task is 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

It can be done by three methods:

• JavaScript .value method
• JavaScript .innerHTML method
• JavaScript textContent method

Method 1: 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

<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() {
        var x = document.getElementById('textArea');
        x.value = "GeeksforGeeks";
    }
</script>

Output:

Change the Content of a textarea 

Method 2: 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: his example uses the above approach to change the Content of a textarea using JavaScript.

HTML

<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>

Output:

Change the Content of a textarea 

Method 3: 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

<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() {
        var x = document.getElementById('textArea').textContent = "GeeksforGeeks"

    }
</script>

Output: