Obtenga el texto de un elemento HTML usando JavaScript
A veces, los desarrolladores necesitan establecer o obtener el texto de un elemento HTML para realizar varias tareas. Para obtener el texto de un elemento, utilice el "contenido del textoPropiedad con propiedades innerhtml e inteText. El elemento.TextContent es una característica DOM Nivel 3 que es totalmente compatible con todos los navegadores.
Este artículo explicará el procedimiento para obtener el texto de un elemento usando JavaScript.
Cómo obtener el texto de un elemento HTML usando JavaScript?
Utilice los siguientes enfoques para obtener el texto de un elemento usando JavaScript:
- Propiedad TextContent con propiedad InnerHTML
- Propiedad de TextContent con propiedad InnText
Método 1: Obtenga el texto de un elemento HTML utilizando la propiedad TextContent con la propiedad InnerHTML
El contenido de texto del nodo especificado y sus descendientes se pueden establecer o devolver utilizando el "contenido del texto" atributo. Devuelve una concatenación del contenido de texto de cada nodo infantil. Sin embargo, se devuelve una cadena vacía como salida en caso de que el elemento esté vacío.
Sintaxis
Siga la sintaxis dada para utilizar el "contenido del texto"Propiedad para obtener el texto del elemento HTML:
elemento.contenido del texto
Ejemplo
En el siguiente ejemplo, crearemos una lista desordenada con elementos infantiles
- Html
- CSS
- Javascript
- Nodo JS
- Reaccionar
Crear un botón y adjuntar un "al hacer clic"Evento que activará el definido"getText ()" método:
Cree un párrafo asignando una ID, donde se mostrará la salida:
Después de ejecutar el código HTML anterior, la salida será la siguiente:
Ahora, en un archivo JavaScript, primero, obtenga el elemento usando el "getElementById ()Método "y luego obtener su texto con la ayuda del"contenido del texto"Propiedad y guárdela en una variable"texto". Entonces, llame al "innerhtmlPropiedad que imprimirá el texto en el campo específico en una sola fila con espacios.
función getText ()
VAR Text = documento.getElementById ("List").contenido del texto;
documento.getElementById ("texto").innerhtml = text;
La salida correspondiente será la siguiente:
Veamos el segundo método!
Método 2: Obtenga el texto de un elemento HTML utilizando la propiedad TextContent con propiedad InnteText
Para obtener el texto en el mismo formato que se muestra en una página web, como en un formulario de lista, use el "intexto"Propiedad con el"contenido del texto" propiedad.
Sintaxis
La siguiente sintaxis se utiliza para la propiedad InnteText:
elemento.intexto
Ejemplo
En el archivo JavaScript, primero, defina una función "getText ()"Eso se activará en el clic del botón para obtener el contenido de texto de la lista de elementos desordenados:
función getText ()
VAR Text = documento.getElementById ("List").contenido del texto;
documento.getElementById ("texto").inntext = text;
Producción
El GIF anterior significa que el "intexto"Propiedad con el"contenido del textoLa propiedad obtiene el texto de un elemento HTML en el formato de lista.
Conclusión
Para obtener el texto de un elemento HTML, use el "contenido del texto"Propiedad con el"innerhtml" y "intexto" propiedades. El innerhtml imprimirá el texto de un elemento en un orden en línea, mientras que el inntext imprime el texto en el mismo formato. Este artículo explicó el procedimiento para obtener el texto de un elemento usando JavaScript.