How to change the Content of a textarea using JavaScript ?
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Â
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
Share your thoughts in the comments
Please Login to comment...