Dado un documento HTML que contiene un elemento <textarea> y la tarea es cambiar el contenido de un elemento <textarea> con la ayuda de JavaScript.
Método 1: este método utiliza el atributo id del área de texto con la propiedad de valor para cambiar el contenido del elemento <área de texto>. El código JavaScript está escrito dentro de la etiqueta <script> .
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>
Producción:
- Antes de hacer clic en el botón:
- Después de hacer clic en el botón:
Método 2: este método utiliza el atributo id del área de texto con la propiedad innerHTML para cambiar el contenido del elemento <textarea>. El código JavaScript está escrito dentro de la etiqueta <script> .
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>
Producción:
- Antes de hacer clic en el botón:
- Después de hacer clic en el botón:
Método 3: este método utiliza el atributo id del área de texto con la propiedad texto interior para cambiar el contenido del elemento <área de texto>. El código JavaScript está entre la etiqueta <script> .
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>
Producción:
- Antes de hacer clic en el botón:
- Después de hacer clic en el botón: