Cómo cambiar el texto de la etiqueta usando JavaScript
En el proceso de completar un formulario en particular o un cuestionario, a menudo hay situaciones en las que es necesario mostrar una respuesta o notificación 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:
-
- "innerhtml" propiedad.
- "intexto" propiedad.
- jQuery "texto()" y "html ()" métodos.
Enfoque 1: Cambie el texto de la etiqueta en JavaScript utilizando la propiedad innerhtml
El "innerhtmlLa 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"Se refiere al elemento sobre el cual se aplicará la propiedad específica para devolver su contenido HTML.
Ejemplo
Realice el siguiente fragmento de código para explicar claramente el concepto establecido:
-
- Primero, dentro del ""Etiqueta incluye 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 invocando la función LabelText ().
Ahora, siga el código JavaScript otorgado a continuación:
function LabelText ()
Deje obtener = documento.GetElementById ('LBL')
conseguir.innerhtml = "El nombre abreviado es el modelo de objeto de documento";
-
- Declarar una función llamada "LabelText ()".
- En su definición, acceda a la identificación del especificado "etiqueta" utilizando el "documento.getElementById ()" método.
- Finalmente, aplique la propiedad InnerHTML y asigne un nuevo "texto"Valor a la etiqueta de acceso. Esto dará como resultado transformar el texto de la etiqueta en un nuevo valor de texto en el botón Haga clic.
Producción
En la salida anterior, se puede observar que el valor de texto de "etiqueta"Se cambia tanto en el DOM como en el código también en el"Elementos" sección.
Enfoque 2: Cambiar el texto de la etiqueta en JavaScript utilizando la propiedad InnteText
El "intexto"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.intexto
En la sintaxis anterior:
-
- "elemento"Indica el elemento sobre el cual se aplicará la propiedad específica para devolver su contenido textual.
Ejemplo
El siguiente ejemplo demuestra el concepto declarado:
Ingresa un nombre:
-
- Primero, asigne un campo de texto de entrada que tenga el especificado "identificación". El "nulo"El valor aquí indica que el valor se obtendrá del usuario y la configuración de autocompletar en"apagado"Evitará los valores sugeridos.
- Después de eso, incluya una etiqueta que tenga lo especificado "identificación" y "texto" valor.
Ahora en el fragmento de código JavaScript, realice los siguientes pasos:
function LabelText ()
Deje obtener = documento.getElementById ('lbl');
Sea nombre = documento.getElementById ('nombre').valor;
conseguir.inntext = nombre;
-
- Defina una función llamada "LabelText ()". En su definición, acceda a la etiqueta creada utilizando el "documento.getElementById ()" método.
- Del mismo modo, 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 al 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 la salida anterior, es evidente que se logra el requisito deseado.
Enfoque 3: Cambie el texto de la etiqueta en JavaScript utilizando los métodos jQuery text () y html ()
El "texto()"El método devuelve el contenido de texto de los elementos seleccionados.El "html ()El método "devuelve el contenido innerhtml de los elementos seleccionados.
Sintaxis
$ (selector).texto()
En esta sintaxis:
-
- "selector"Señala el contenido de texto del elemento accedido.
$ (selector).html ()
En la sintaxis dada anteriormente:
-
- "selector"Se refiere al interno del elemento accedido.
Ejemplo
Este ejemplo ilustrará el concepto establecido utilizando métodos jQuery.
Revise el fragmento de código dado a continuación:
-
- En primer lugar, incluya el "jQueryBiblioteca para aplicar sus métodos.
- Después de eso, dentro del ""Etiqueta incluye dos etiquetas diferentes con el especificado"identificación"Y el valor de texto contra cada uno de ellos.
- Además, asigne botones separados a cada una de las etiquetas creadas. Ambos botones tendrán un adjunto "al hacer clic"Evento invocar dos funciones específicas diferentes.
Ahora, revise las siguientes líneas de código JavaScript:
function LabelText ()
$ ('#lbl1').Texto ("Linuxhint")
función etiquetText2 ()
$ ('#lbl2').HTML ("JavaScript")
-
- En el primer paso, declare una función llamada "LabelText ()".
- En su definición, acceda a la etiqueta contra la obtenida "identificación"Y aplica el"texto()"Método para él. Esto dará como resultado cambiar el valor de texto de la etiqueta al valor especificado en su parámetro.
- Del mismo modo, defina una función llamada "LabelText2 ()".
- Aquí, de manera similar, repita el paso discutido 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 la salida anterior, el primer valor de texto transformado de la etiqueta en el modelo de objeto de documento (DOM) corresponde a la jQuery "texto()"El método y el otro es el resultado del"html ()" método.
Hemos compilado los enfoques para cambiar el texto de la etiqueta usando JavaScript.
Conclusión
El "innerhtml"Propiedad, la"intexto"Propiedad, o jQuery"texto()" y "html ()Los métodos se pueden utilizar 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 innecext se puede implementar para asignar un nuevo valor de texto a la etiqueta accedida, cambiándola así. El enfoque jQuery se puede utilizar para transformar el valor de texto de la etiqueta con la ayuda de sus dos métodos, lo que resulta en 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.