Javascript Innerhtml

| | | | | | | | | | | | | | | | | | | | | | | | | | | | | | |

Devi sapere come modificare il testo o l’HTML che appare nella pagina per rendere i tuoi siti più interattivi. è qui che entrano in gioco gli attributi HTML innerText e innerHTML.

Questi attributi semplificano la modifica del testo di un elemento DOM e del suo codice HTML codice. In questa guida imparerai come utilizzare gli attributi JavaScript innerText e innerHTML.

Che cos’è JavaScript innerHTML?

La proprietà JavaScript innerHTML imposta il contenuto HTML di un elemento su una pagina web. InnerHTML è una proprietà del DOM HTML. innerHTML viene spesso utilizzato per impostare e modificare il contenuto di un

elemento.

Puoi usare innerHTML in questo modo:

document.getElementById("paragraph").innerHTML = "Carriera Karma!";

Questa riga di codice imposta il contenuto del "paragrafo"

elemento per "Karma di carriera!" Il metodo getElementById() recupera un elemento tramite il suo ID.

Il browser definisce un Document Object Model (DOM) quando viene caricata una pagina. Questo DOM è una serie di oggetti visualizzati sulla pagina.

Il DOM significa che non devi cambiare il codice HTML ogni volta che vuoi cambiare un elemento web. Puoi usare il DOM e JavaScript per cambiare il modo in cui la pagina appare in una particolare sessione.

Cos’è JavaScript innerText?

La proprietà JavaScript innerText imposta il contenuto del testo di un elemento. Imposta anche il contenuto dei suoi discendenti. I discendenti possono includere tag all’interno di un paragrafo.

La sintassi di innerText è simile a quella di innerHTML:

document.getElementById("element").innerText = "Questo è un test.&rdquo ;;

Questo imposta il valore del testo dell’elemento con l’id "elemento" a "Questo è un test."

Puoi testare questi metodi accedendo alla tua console JavaScript e selezionando un elemento da modificare:

Questo cambia il contenuto del primo tag HTML

su una pagina Web. Se desideri sostituire il testo, puoi utilizzare l’attributo innerText:

Questo cambia il contenuto del secondo paragrafo (indicato dal numero 1) nella pagina in "Questo è un test".

Cominciamo cambiando il testo su una pagina Web. Creeremo una semplice pagina Web con flashcard. Questa pagina Web mostrerà una domanda sull’HTML. Avrà un pulsante che, se cliccato, rivelerà la risposta a una domanda sull’HTML.

Crea una pagina Web

Il nostro primo passo è creare un file index.html per il nostro front-end:

Questa pagina crea un contenitore con tre componenti. Innanzitutto, abbiamo la domanda che stiamo ponendo all’utente. Abbiamo il messaggio su come rivelare la risposta. La nostra pagina termina con un pulsante per rivelare la risposta.

Il nostro codice restituisce il contenuto testuale dei nostri elementi:

6T3AqzAPinI7lFyjQvH2K5A7rt 1RCErWqdxCPfZsgbtsRnymdUu9CRkmnu6SLrXKDZ19i9pObkHLyFwA3q3CI2vsm1IfCvU3AYYkweMNHLbOYGhgByfgvd417wxRACkh08KQrYx

Stiamo per applicare alcuni stili CSS in un file styles.css per rendere più bella la nostra pagina:

Ora diamo un’occhiata alla nostra pagina web:

Acuv0IVyLlR1c2 EiCi4KGUjIRL47I85nFJfPbVzO DFk7bGtEq0PvcutixgrZEGOCBva3hJkyy7XP83DahvKKYgPdIp0jfHD2sY3hdOSUjBjVcAhxeIgOwOH733NW6syaFhNluO

I nostri spettacoli del sito qualcosa che assomiglia più a una scheda flash. Abbiamo definito il nostro pulsante.

Modifica il testo utilizzando JavaScript innerHTML e innerText

Vogliamo che la risposta alla domanda venga rivelata quando si fa clic sul pulsante. Innanzitutto, andremo a seleziona il testo e gli elementi del pulsante che utilizzeremo nel nostro codice JavaScript. Scriveremo tutto questo codice nel nostro file scripts.js:

Avanti, siamo andando a creare una funzione JavaScript. Questa funzione rivela la risposta alla nostra domanda quando si fa clic sul pulsante:

Per attivare la nostra funzione premendo un pulsante, creeremo un semplice ascoltatore di eventi. Questo ascoltatore ascolta un clic su il nostro pulsante:

Abbiamo finito di configurare la nostra app per schede flash. Se visualizziamo la nostra pagina web e facciamo clic sul pulsante "Mostra risposta", il testo nel nostro paragrafo viene modificato per rivelare la risposta: