Ottieni il testo di un elemento HTML usando JavaScript
A volte, gli sviluppatori devono impostare o ottenere il testo di un elemento HTML per eseguire varie attività. Per ottenere il testo di un elemento, utilizzare il "TextContent"Proprietà con proprietà interne e tratteggi interni. L'elemento.TextContent è una funzione di livello 3 DOM completamente supportata in tutti i browser.
Questo articolo spiegherà la procedura per ottenere il testo di un elemento usando JavaScript.
Come ottenere il testo di un elemento HTML usando JavaScript?
Utilizza i seguenti approcci per ottenere il testo di un elemento usando JavaScript:
- Proprietà del textContent con proprietà InnerHTML
- Proprietà di TextContent con proprietà nel tratteggio
Metodo 1: ottenere il testo di un elemento HTML utilizzando la proprietà TextContent con proprietà InnerHTML
Il contenuto di testo del nodo specificato e dei suoi discendenti può essere impostato o restituito usando "TextContent"Attributo. Restituisce una concatenazione del contenuto di testo di ciascun nodo figlio. Tuttavia, una stringa vuota viene restituita come output nel caso in cui l'elemento sia vuoto.
Sintassi
Segui la sintassi data per utilizzare il "TextContent"Proprietà per ottenere il testo dell'elemento HTML:
elemento.TextContent
Esempio
Nel seguente esempio, creeremo un elenco non ordinato con elementi figlio
- Html
- CSS
- JavaScript
- Nodo js
- Reagire
Crea un pulsante e allega un "al clic"Evento che attiverà il definito"getText ()" metodo:
Crea un paragrafo assegnando un ID ad esso, in cui verrà visualizzato l'output:
Dopo aver eseguito il codice HTML sopra, l'output sarà il seguente:
Ora, in un file JavaScript, prima, ottieni l'elemento usando "getElementById ()"Metodo e quindi prendere il suo testo con l'aiuto di"TextContent"Proprietà e archiviarla in una variabile"testo". Quindi, chiama il "Innerhtml"Proprietà che stampa il testo sul campo specifico in una singola riga con spazi.
funzione getText ()
var text = documento.getElementById ("elenco").textcontent;
documento.getElementById ("Testo").InnerHtml = text;
L'output corrispondente sarà il seguente:
Dai un'occhiata al secondo metodo!
Metodo 2: ottenere il testo di un elemento HTML utilizzando la proprietà TextContent con proprietà InnerText
Per ottenere il testo nello stesso formato mostrato in una pagina web, come in un modulo di elenco, usa il "testo interno"Proprietà con il"TextContent" proprietà.
Sintassi
La seguente sintassi viene utilizzata per la proprietà InnerText:
elemento.testo interno
Esempio
Nel file JavaScript, in primo luogo, definire una funzione "getText ()"Ciò attiverà il pulsante Clicca per ottenere il contenuto di testo dell'elenco Element non ordinato:
funzione getText ()
var text = documento.getElementById ("elenco").textcontent;
documento.getElementById ("Testo").InnerText = text;
Produzione
La GIF sopra indica che "testo interno"Proprietà con il"TextContent"La proprietà ottiene il testo di un elemento HTML nel formato dell'elenco.
Conclusione
Per ottenere il testo di un elemento HTML, usa il “TextContent"Proprietà con il"Innerhtml" E "testo interno" proprietà. L'InnerHTML stamperà il testo di un elemento in un ordine in linea, mentre il tratto interno stampa il testo nello stesso formato. Questo articolo ha spiegato la procedura per ottenere il testo di un elemento usando JavaScript.