En el proceso de completar un formulario o cuestionario en particular, a menudo hay situaciones en las que es necesario mostrar una respuesta o notificación en particular en respuesta a la opción seleccionada. Por ejemplo, lidiar con preguntas de opción múltiple, etc. En tales casos, cambiar el texto de la etiqueta usando JavaScript es muy útil para mejorar la accesibilidad de los formularios HTML y el diseño general del documento.
¿Cómo cambiar el texto de la etiqueta usando JavaScript?
Los siguientes enfoques se pueden utilizar para cambiar el texto de la etiqueta en JavaScript:
-
- “ HTML interno ' propiedad.
- “ textointerno ' propiedad.
- jQuery “ texto() ' y ' html() ' métodos.
Enfoque 1: cambiar el texto de la etiqueta en JavaScript usando la propiedad innerHTML
Los ' HTML interno La propiedad ” devuelve el contenido HTML interno de un elemento. Esta propiedad se puede utilizar para obtener la etiqueta específica y cambiar su texto a un valor de texto recién asignado.
Sintaxis
elemento.innerHTML
En la sintaxis anterior:
-
- “ elemento ” hace referencia al elemento sobre el que se aplicará la propiedad específica para devolver su contenido HTML.
Ejemplo
Lea el siguiente fragmento de código para explicar claramente el concepto establecido:
< centro >< cuerpo >
< etiqueta identificación = 'lbl' > DOM etiqueta >
< hermano >< hermano >
< botón al hacer clic = 'textoetiqueta()' > Haga clic aquí botón >
cuerpo > centro >
-
- Primero, dentro del “
” etiqueta, incluya el “ etiqueta ” con el especificado “ identificación ' y ' texto ' valores. - Después de eso, cree un botón con un adjunto “ al hacer clic ” evento que invoca la función labelText().
- Primero, dentro del “
Ahora, siga el código JavaScript que se proporciona a continuación:
función etiquetaTexto ( ) {dejar obtener = documento.getElementById ( 'lbl' )
get.innerHTML= 'El nombre abreviado es Modelo de objeto de documento' ;
}
-
- Declara una función llamada “ etiquetaTexto() ”.
- En su definición, acceda al id del especificado “ etiqueta ' utilizando el ' documento.getElementById() ' método.
- Finalmente, aplique la propiedad innerHTML y asigne un nuevo “ texto ” valor a la etiqueta accedida. Esto dará como resultado la transformación del texto de la etiqueta en un nuevo valor de texto al hacer clic en el botón.
Producción
En el resultado anterior, se puede observar que el valor de texto de “ etiqueta ” se cambia tanto en el DOM como en el código, así como en el “ Elementos ' sección.
Enfoque 2: cambiar el texto de la etiqueta en JavaScript usando la propiedad innerText
Los ' textointerno La propiedad ” devuelve el contenido de texto del elemento. Esta propiedad se puede implementar para asignar un valor de entrada de usuario ingresado en el campo de entrada al texto de la etiqueta asignada.
Sintaxis
elemento.innerText
En la sintaxis anterior:
-
- “ elemento ” indica el elemento sobre el que se aplicará la propiedad específica para devolver su contenido textual.
Ejemplo
El siguiente ejemplo demuestra el concepto establecido:
< centro >< cuerpo >Ingresa un nombre: < aporte escribe = 'texto' identificación = 'nombre' valor = '' autocompletar = 'apagado' >
< pags >< aporte escribe = 'botón' identificación = 'bt' valor = 'Cambiar texto de etiqueta' al hacer clic = 'textoetiqueta()' > pags >
< etiqueta identificación = 'lbl' > norte / A etiqueta >
cuerpo > centro >
-
- Primero, asigne un campo de texto de entrada que tenga el ' identificación ”. Los ' nulo ” valor aquí indica que el valor se obtendrá del usuario y configurará la función de autocompletar en “ apagado ” evitará los valores sugeridos.
- Después de eso, incluya una etiqueta que tenga el ' identificación ' y ' texto ' valor.
Ahora, en el fragmento de código JavaScript, realice los siguientes pasos:
función etiquetaTexto ( ) {dejar obtener = documento.getElementById ( 'lbl' ) ;
dejar nombre = documento.getElementById ( 'nombre' ) .valor;
get.innerText = nombre;
}
-
- Defina una función llamada “ etiquetaTexto() ”. En su definición, acceda a la etiqueta creada mediante el botón “ documento.getElementById() ' método.
- De manera similar, repita el paso anterior para acceder al campo de texto de entrada especificado y obtenga el valor ingresado por el usuario.
- Finalmente, asigne el valor ingresado por el usuario del paso anterior a la etiqueta obtenida. Esto cambiará el texto de la etiqueta al valor ingresado por el usuario en el campo de texto de entrada.
Producción
En el resultado anterior, es evidente que se logra el requisito deseado.
Enfoque 3: cambiar el texto de la etiqueta en JavaScript usando los métodos jQuery text() y html()
Los ' texto() El método ' devuelve el contenido de texto de los elementos seleccionados. El ' html() El método devuelve el contenido HTML interno de los elementos seleccionados.
Sintaxis
$ ( selector ) .texto ( )
En esta sintaxis:
-
- “ selector ” apunta al contenido de texto del elemento accedido.
En la sintaxis anterior:
-
- “ selector ” se refiere al HTML interno del elemento al que se accede.
Ejemplo
Este ejemplo ilustrará el concepto establecido usando métodos jQuery.
Vaya a través del fragmento de código dado a continuación:
< guion origen = “https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js” > guion >< centro >< cuerpo >
< etiqueta identificación = 'lbl1' > Este es el siguiente sitio web: etiqueta >
< hermano >< hermano >
< etiqueta identificación = 'lbl2' > Contenido: etiqueta >
< hermano >< hermano >
< botón al hacer clic = 'textoetiqueta()' > Hacer clic por Sitio web botón >
< botón al hacer clic = 'textoetiqueta2()' > Hacer clic por Contenido botón >
cuerpo > centro >
-
- En primer lugar, incluya el “ jQuery ” biblioteca para aplicar sus métodos.
- Después de eso, dentro del “
” etiqueta, incluye dos etiquetas diferentes con el especificado “ identificación ” y valor de texto contra cada uno de ellos. - Además, asigne botones separados a cada una de las etiquetas creadas. Ambos botones tendrán adjunto un “ al hacer clic ” evento que invoca dos funciones especificadas diferentes.
Ahora, vaya a través de las siguientes líneas de código JavaScript:
función etiquetaTexto ( ) {$ ( '#lbl1' ) .texto ( 'linux' )
}
función etiquetaTexto2 ( ) {
$ ( '#lbl2' ) .html ( 'JavaScript' )
}
-
- En el primer paso, declare una función llamada “ etiquetaTexto() ”.
- En su definición, acceda a la etiqueta contra la buscada “ identificación ” y aplicar el “ texto() ” método para ello. Esto resultará en cambiar el valor de texto de la etiqueta al valor especificado en su parámetro.
- Del mismo modo, defina una función llamada “ etiquetaTexto2() ”.
- Aquí, de manera similar, repita el paso mencionado anteriormente para acceder a la etiqueta. En este caso, aplique el “ html() ' método. Este método también funcionará de la misma manera y devolverá el valor de texto especificado, cambiando así el texto de la etiqueta.
Producción
En el resultado anterior, el primer valor de texto transformado de la etiqueta en el Modelo de objetos del documento (DOM) corresponde a jQuery ' texto() ” método y el otro es el resultado de la “ html() ' método.
Hemos compilado los enfoques para cambiar el texto de la etiqueta usando JavaScript.
Conclusión
Los ' HTML interno ” propiedad, el “ textointerno 'propiedad, o jQuery' texto() ' y ' html() Se pueden utilizar métodos para cambiar el texto de la etiqueta usando JavaScript. La propiedad innerHTML se puede aplicar para obtener la etiqueta específica y cambiar su contenido de texto a un valor de texto recién asignado. La propiedad innerText se puede implementar para asignar un nuevo valor de texto a la etiqueta a la que se accede y cambiarla. El enfoque de jQuery se puede utilizar para transformar el valor de texto de la etiqueta con la ayuda de sus dos métodos, lo que da como resultado el mismo resultado en forma de dos valores de texto asignados diferentes. Este artículo demostró las técnicas para cambiar el texto de la etiqueta usando JavaScript.