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
Methods to change the Content of ext Area
It can be done by three methods:
- Using JavaScript .value method
- Using JavaScript .innerHTML method
- Using JavaScript textContent method
- Using JavaScript innerText methods
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">neveropen</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 = "neveropen"; } </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">neveropen</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 = "neveropen"; } </script> </body></html> |
Output:
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">neveropen</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 = "neveropen"); } </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">neveropen</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 = "neveropen"; } </script> </body></html> |
Output:
