Propiedad de inNTEXT en JavaScript | Explicado

La propiedad inntaxt de JavaScript se usa para obtener o establecer el texto dentro de un elemento HTML y sus descendientes. El intexto tiene un fenómeno de trabajo similar a innerhtml. Ambas propiedades manipulan el contenido de un elemento HTML pero con diferentes aspectos. El inntext se centra en el contenido textual y el innerhtml considera el contenido HTML de un elemento.

Este artículo proporciona una visión de la propiedad de innetas para lograr los siguientes objetivos.

• Cómo funciona la propiedad innecext en JavaScript
• Cómo usar la propiedad InnteText en JavaScript
• Diferencia entre inntext e innerhtml

Cómo funciona la propiedad innecext en JavaScript

El funcionamiento de inntext depende de las siguientes sintaxis.

Para obtener el texto de un elemento HTML:

nodo.intexto;

Para establecer/actualizar el texto de un elemento HTML:

nodo.inntext = "texto"

En las sintaxis anteriores:

• El nodo se refiere al elemento HTML y a todos sus descendientes.
• El texto representa el nuevo texto que se actualizaría o establecería en lugar del texto existente.

Cómo usar la propiedad InnteText en JavaScript

Los siguientes ejemplos demuestran el uso del intexto Propiedad en HTML.

Ejemplo 1: Obtenga el texto de un elemento HTML

Hemos ilustrado este ejemplo para mostrar cómo se puede obtener el texto de un elemento usando innertext. propiedad.

Html

Esto es un ejemplo de intexto

Haga clic aquí para obtener el inntext

En el código anterior, un párrafo (id = "P1") Se crea que contiene un pequeño etiqueta y un fuerte etiqueta. Además, se llama a una función get () en el clic del botón.

Javascript

función get ()
alerta (documento.getElementById ("P1").inteText);

Una función nombrada conseguir() se crea que contiene un alerta declaración para mostrar el texto de un elemento (id = "P1").

Producción

Se observa que el texto del párrafo (id = "P1") Y todos sus descendientes (Span and Strong) se muestran.

Ejemplo 2: Actualice el texto de un elemento HTML

El código HTML y JS proporcionado a continuación ayuda a actualizar el texto del elemento.

Html

Este es un ejemplo de propiedad de innetas

Haga clic aquí para actualizar el inntext

El código HTML crea un párrafo con id = "P1”Y botón que ejecuta el actualizar() función en su al hacer clic propiedad.

Javascript

Function Update ()
documento.getElementById ("P1").inteText = "El texto se ha actualizado!";

El código JavaScript proporcionado anteriormente crea una función Update () que aplica la propiedad InnteText al párrafo con id = "P1".

Producción

Se observa a partir de la salida que el texto del párrafo se ha actualizado al nuevo texto.

Ejemplo 3: Establezca el texto para un elemento HTML

En este ejemplo, el texto de un elemento se colocará dentro del otro elemento y el siguiente código ayuda a hacerlo.

Html

Bienvenido a Linuxhint

Haga clic aquí para establecer el inntext

El código HTML contiene un párrafo con id = "viejo", Un botón para activar el colocar() función y un encabezado con id = "nuevo".

Javascript

función set ()
documento.getElementById ("nuevo").inntext = documento.getElementByid ("viejo").intexto;

El código anterior obtiene el texto de un elemento de párrafo (id = "viejo") Y asigna este texto al elemento de encabezado (id ="nuevo").

Producción

La salida anterior muestra que el texto del párrafo (id = "viejo") Está configurado en un encabezado (id ="nuevo").

Diferencia entre inntext e innerhtml

El intexto y innerhtml Puede poner confusión en tu cabeza. El inntext solo considera el contenido textual, mientras que el innerhtml Funciones en el contenido HTML de un elemento que también puede incluir las etiquetas. Esta sección proporciona la diferencia entre InnteText e InnerHTML utilizando el siguiente código.

Html

Bienvenido a Linuxhint

para innertext
para innerhtml

El código anterior crea una etiqueta de párrafo y dos botones. El primer botón desencadena el texto() función mientras que la segunda función ejecuta el html () función.

Javascript

functionText ()
alerta (documento.getElementById ("texto").inteText);

functionHtml ()
alerta (documento.getElementById ("texto").innerhtml);

Se crean dos funciones que practican el intexto y innerhtml Propiedades en un párrafo id = "texto".

Producción

Se observa que el innerhtml muestra los elementos internos mientras que el intexto solo ha recuperado el contenido textual.

Conclusión

La propiedad inntaxt de JavaScript le permite obtener o actualizar/establecer el contenido de un elemento HTML. Este artículo demuestra varias sintaxis de la propiedad innecext de JavaScript con ejemplos que transmiten mejor el concepto. Al pasar por el artículo, habría aprendido a obtener el texto, actualizar el texto o establecer un texto en un elemento HTML utilizando la propiedad inntaxt de JavaScript. Por último, hemos presentado la diferencia entre Inntext e Innerhtml para allanar el concepto en tu cabeza.