Skip to content
Related Articles
Open in App
Not now

Related Articles

How to change the Content of a textarea using JavaScript ?

Improve Article
Save Article
  • Difficulty Level : Basic
  • Last Updated : 05 Jan, 2023
Improve Article
Save Article

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:

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

Change the Content of a textarea 

Method 3: This method uses the id attribute of the textarea with innerText property to change the content of <textarea> element. JavaScript code is between 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').innerText
                = "GeeksforGeeks";
    }
</script>

Output: 

Change the Content of a textarea

Change the Content of a textarea 


My Personal Notes arrow_drop_up
Related Articles

Start Your Coding Journey Now!