Proprietà innerText in JavaScript | Spiegato

La proprietà Innertext di JavaScript viene utilizzata per ottenere o impostare il testo all'interno di un elemento HTML e dei suoi discendenti. IL testo interno ha un fenomeno di lavoro simile a Innerhtml. Entrambe le proprietà manipolano il contenuto di un elemento HTML ma con aspetti diversi. Il testo Inner si concentra sul contenuto testuale e l'innerHTML considera il contenuto HTML di un elemento.

Questo articolo fornisce una visione della proprietà del tratto interno per raggiungere i seguenti obiettivi.

• Come funziona la proprietà Innertext in JavaScript
• Come utilizzare la proprietà InnerText in JavaScript
• Differenza tra Innertext e InnerHTML

Come funziona la proprietà Innertext in JavaScript

Il funzionamento del testo interno dipende dalle seguenti sintassi.

Per ottenere il testo di un elemento HTML:

nodo.testo interno;

Per impostare/aggiornare il testo di un elemento HTML:

nodo.InnerText = "Testo"

Nelle sintassi sopra:

• IL nodo si riferisce all'elemento HTML e a tutti i suoi discendenti.
• IL testo rappresenta il nuovo testo che verrebbe aggiornato o impostato al posto del testo esistente.

Come utilizzare la proprietà InnerText in JavaScript

I seguenti esempi dimostrano l'uso del testo interno Proprietà in HTML.

Esempio 1: Ottieni il testo di un elemento HTML

Abbiamo illustrato questo esempio per mostrare come il testo di un elemento può essere ottenuto usando il tratto. proprietà.

Html

Questo è un esempio Di testo interno

Clicca qui per ottenere il tratto interno

Nel codice sopra, un paragrafo (id = "P1“) È creato che contiene un file piccolo tag e a forte etichetta. Inoltre, una funzione get () viene chiamata sul clic del pulsante.

JavaScript

funzione get ()
Avviso (documento.getElementById ("P1").nel testo interno);

Una funzione denominata Ottenere() è creato che contiene un mettere in guardia istruzione per visualizzare il testo di un elemento (id = "P1").

Produzione

Si osserva che il testo del paragrafo (id = "P1“) E tutti i suoi discendenti (span e forte) vengono visualizzati.

Esempio 2: aggiorna il testo di un elemento HTML

Il codice HTML e JS fornito di seguito assistono nell'aggiornamento del testo dell'elemento.

Html

Questo è un esempio di proprietà nel tratteggio

Clicca qui per aggiornare il tratto interno

Il codice HTML crea un paragrafo con ID = "P1"E pulsante che esegue il aggiornamento() funzione sul suo al clic proprietà.

JavaScript

Funzione Update ()
documento.getElementById ("P1").InnerText = "Il testo è stato aggiornato!";

Il codice JavaScript fornito sopra crea una funzione Update () che applica la proprietà InnerText al paragrafo con ID = "P1".

Produzione

Dall'output si osserva che il testo del paragrafo è stato aggiornato al nuovo testo.

Esempio 3: impostare il testo per un elemento HTML

In questo esempio, il testo di un elemento verrà posizionato all'interno dell'altro elemento e il seguente codice aiuta a farlo.

Html

Benvenuti in Linuxhint

Clicca qui per impostare il testo interno

Il codice HTML contiene un paragrafo con ID = "vecchio“, Un pulsante per attivare il impostato() funzione e un'intestazione con id = "nuovo".

JavaScript

funzione set ()
documento.getElementById ("Nuovo").InnerText = Document.getElementById ("vecchio").testo interno;

Il codice sopra riceve il testo di un elemento di paragrafo (id = "vecchio") E assegna questo testo all'elemento intestato (id ="nuovo").

Produzione

L'output sopra mostra che il testo del paragrafo (id = "vecchio”) È impostato su una rotta (id ="nuovo").

Differenza tra Innertext e InnerHTML

IL testo interno E Innerhtml Può mettere confusione nella tua testa. Il text interno considera solo il contenuto testuale mentre il Innerhtml funzioni sul contenuto HTML di un elemento che può includere anche i tag. Questa sezione fornisce la differenza tra InnerText e InnerHTML utilizzando il seguente codice.

Html

Benvenuto a Linuxhint

per il testo interno
per Innerhtml

Il codice sopra crea un tag di paragrafo e due pulsanti. Il primo pulsante innesca il testo() funzione mentre la seconda funzione esegue il html () funzione.

JavaScript

functionText ()
Avviso (documento.getElementById ("Testo").nel testo interno);

functionHtml ()
Avviso (documento.getElementById ("Testo").Innerhtml);

Vengono create due funzioni che praticano il testo interno E Innerhtml Proprietà su un paragrafo ID = "testo".

Produzione

Si osserva che il Innerhtml mostra gli elementi interni mentre il testo interno ha solo recuperato il contenuto testuale.

Conclusione

La proprietà InnerText di JavaScript consente di ottenere o aggiornare/impostare il contenuto di un elemento HTML. Questo articolo dimostra vari sintassi della proprietà Innertext di JavaScript con esempi che trasmettono meglio il concetto. Attraversando l'articolo, avresti imparato a ottenere il testo, aggiornare il testo o impostare un testo su un elemento HTML usando la proprietà InnerText di JavaScript. Infine, abbiamo presentato la differenza tra Innertext e InnerHTML per aprire il concetto nella tua testa.