How to change the Content of a <textarea> using JavaScript ? - GeeksforGeeks

27 May, 2021
Given an HTML document containing a <textarea> element and the task is to change the content of a <textarea> element with the help of JavaScript.
Method 1: This method uses id attribute of textarea with value property to change the content of <textarea> element. JavaScript code is written within the <script> tag.
HTML
<!DOCTYPE html><html> <head>    <title>        How to change the Content of        a textarea using JavaScript?    </title></head> <body style="text-align:center;">         <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></body> </html>                            
Output: 
Before clicking the button:  
After clicking the button:  
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.
HTML
<!DOCTYPE html><html> <head>    <title>        How to change the Content of        a textarea using JavaScript?    </title></head> <body style="text-align:center;">         <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: 
Before clicking the button:  
After clicking the button:  
Method 3: This method uses id attribute of the textarea with innerText property to change the content of <textarea> element. JavaScript code is between the <script> tag.
HTML
<!DOCTYPE html><html> <head>    <title>        How to change the Content of        a textarea using JavaScript?    </title></head> <body style="text-align:center;">         <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: 
Before clicking the button:  
After clicking the button:  
 
surinderdawra388
javascript-basics
javascript-string
Picked
JavaScript
Web Technologies
Web technologies Questions
Writing code in comment?
Please use ide.geeksforgeeks.org,
generate link and share the link here.
Comments
Old Comments
Difference between var, let and const keywords in JavaScript
Convert a string to an integer in JavaScript
Differences between Functional Components and Class Components in React
How to Use the JavaScript Fetch API to Get Data?
Difference Between PUT and PATCH Request
Top 10 Front End Developer Skills That You Need in 2022
Installation of Node.js on Linux
Top 10 Projects For Beginners To Practice HTML and CSS Skills
How to fetch data from an API in ReactJS ?
How to insert spaces/tabs in text using HTML/CSS?