📅 最后修改于: 2023-12-03 14:59:53.040000 🧑 作者: Mango
Cuando creamos una página web, a menudo necesitamos actualizar el contenido de alguna etiqueta con información dinámica. En tal caso, el cambio de texto de la etiqueta se realiza mediante JavaScript.
En este tutorial, vamos a cubrir cómo cambiar el texto de una etiqueta de <label> usando JavaScript.
Primero, creamos un archivo HTML y agregamos una etiqueta <label> en el cuerpo del documento. La etiqueta contendrá un ID que utilizaremos para acceder al elemento con JavaScript.
<!DOCTYPE html>
<html>
<head>
<title>Document</title>
</head>
<body>
<label id="label-id">Texto original</label>
<script src="tu-archivo.js"></script>
</body>
</html>
Una vez que hemos creado la etiqueta <label> y le hemos dado un ID, podemos acceder al elemento utilizando el método document.getElementById(). Esto nos permitirá obtener una referencia a la etiqueta y actualizar su contenido.
//Obtener el elemento de etiqueta a través de id
const label = document.getElementById("label-id");
Ahora que tenemos una referencia a nuestra etiqueta mediante JavaScript, podemos cambiar su contenido con la propiedad innerHTML. Así que agreguemos el siguiente código después de la línea que acabamos de escribir:
// Actualizar el contenido de la etiqueta
label.innerHTML = "Nuevo texto";
Este código actualiza el contenido de la etiqueta <label> con el nuevo texto "Nuevo texto".
El archivo tu-archivo.js completo se vería así:
//Obtener el elemento de etiqueta a través de id
const label = document.getElementById("label-id");
// Actualizar el contenido de la etiqueta
label.innerHTML = "Nuevo texto";
En este tutorial, hemos visto cómo cambiar el texto de una etiqueta usando Javascript en HTML. Con solo unos pocos pasos, pudimos acceder a la etiqueta, obtener una referencia a su ID y actualizar su contenido. Ahora puedes usar este conocimiento para otros elementos dinámicos de la página web.