Come modificare il contenuto dell'elemento HTML in JavaScript
L'acronimo HTML di Hyper Text Mark Up Language viene utilizzato per creare una struttura delle pagine Web che vedi su Internet ogni giorno. Nel frattempo, JavaScript è un noto linguaggio di scripting utilizzato per eseguire operazioni dinamiche su pagine Web per renderle più interattive.
Un'interessante funzione HTML è HTML DOM STORCH per il modello di oggetti documenti. È un'API di programmazione per i documenti HTML e XML. È sostanzialmente utilizzato per fornire una struttura logica ai documenti. Definisce come valutare e manipolare un documento HTML. Permette a JavaScript di modificare il contenuto degli elementi HTML.
In questo articolo discuteremo:
- Modificare il contenuto di elementi HTML usando JavaScript
- Alterando il valore degli attributi HTML usando JavaScript
- Utilizzo del documento.Metodo Write ()
Modificare il contenuto di elementi HTML usando JavaScript
La proprietà InnerHTML è l'approccio più rapido per alterare il contenuto degli elementi HTML. IIS ha spiegato in dettaglio di seguito:
Proprietà InnerHTML
La proprietà InnerHTML altera il contenuto di un elemento HTML. Per utilizzare questo metodo utilizzare la seguente sintassi.
Sintassi dell'utilizzo di InnerHTML
documento.getElementById (ID).InnerHtml = new HTMLDimostriamo la proprietà InnerHTML con un esempio.
Esempio 1
Questo è un paragrafo
Il paragrafo di cui sopra è stato modificato dalla proprietà InnerHTML
Nell'esempio sopra, stiamo manipolando il
Elemento utilizzando la proprietà JavaScript InnerHTML. Il paragrafo ha un id = "para1". Il dom HTML utilizza questo ID per ottenere l'elemento particolare e quindi modificare il contenuto di
Tag usando la proprietà InnerHTML. In questo modo il vecchio paragrafo è sovrascritto dal nuovo paragrafo. L'output dell'esempio sopra è il seguente:
Possiamo anche cambiare gli elementi usando questo metodo. Facciamo un esempio in cui la proprietà InnerHTML cambia il
Elemento usando il suo ID.
Esempio 2
Cambiamo questa intestazione
La vecchia voce è stata cambiata
Nell'esempio sopra HTML Dom utilizza Id = ”head2" per ottenere il
Elemento e la proprietà InnerHTML modifica il contenuto dell'elemento. L'output è il seguente.
Ora discutiamo di come possiamo cambiare il valore di un attributo HTML usando JavaScript.
Alterare il valore degli attributi
Usando il nome dell'attributo possiamo modificare il valore dell'attributo HTML.
Sintassi
La sintassi è mostrata di seguito:
documento.getElementById (ID).attributo = nuovo valoreDimostriamo la sintassi di cui sopra usando un esempio adatto.
L'immagine del cane viene modificata nell'immagine del gatto
Nell'esempio sopra, HTML DOM ottiene l'elemento IMG di Id = "Image1" Quindi l'attributo JavaScript Src da un dogpic.jpg a un catpic.jpg.
Passando all'ultimo metodo che è documento.Metodo Write ().
documento.scrivere()
documento.write () viene utilizzato per scrivere espressioni HTML o codice JavaScript direttamente nel flusso di output HTML. Sovrascriverà il documento se si utilizza questo metodo dopo il caricamento del documento HTML. Proviamo un esempio.
Questo è un paragrafo
Questo è un altro paragrafo
Nell'esempio sopra, il documento.Il metodo Write () mostra l'altezza dello schermo della finestra come output.
Conclusione
HTML DOM fornisce alcune proprietà che consentono a JavaScript di alterare i contenuti degli elementi HTML. Al fine di modificare il contenuto degli elementi HTML, viene utilizzata la proprietà InnerHTML (). È inoltre possibile modificare il valore dell'attributo degli elementi HTML utilizzando direttamente il nome dell'attributo. Nel frattempo, il documento.La proprietà write () viene utilizzata per scrivere espressioni HTML o codice JavaScript direttamente nel flusso di output HTML. Questo articolo discute in dettaglio queste proprietà con esempi pertinenti.