JavaScript è uno dei linguaggi di programmazione più utilizzati. È anche molto popolare per la sua versatilità su tutte le piattaforme. Ci sono diverse proprietà in che semplificano il tuo lavoro di creazione di un sito web dinamico. In questo articolo, discuteremo dell'HTML interno in JavaScript nella seguente sequenza:
Introduzione a JavaScript
JavaScript viene utilizzato come linguaggio di programmazione lato client e come linguaggio di programmazione lato server. viene utilizzato per eseguire sul lato client e sul lato server di qualsiasi applicazione. Un nodo può anche essere indicato come Node.js in diversi punti.
JavaScript fornisce una pletora di metodi per eseguire facilmente diverse funzionalità. Questo è ciò che ha reso JavaScript uno dei linguaggi di programmazione più popolari e viene anche ampiamente utilizzato in diversi tipi di sviluppo del prodotto.
HTML interno in JavaScript
L'interno La proprietà in JavaScript è una delle funzionalità molto utili ed è ampiamente utilizzata per fornire un aspetto più dinamico e versatile alle pagine web che vengono create.
Se proviamo a spiegare semplicemente innerHTML, il lavoro svolto da innerHTML è semplicemente caricare il contenuto della pagina senza aggiornare l'intera pagina. Ciò consente di risparmiare l'utilizzo dei dati e il tempo dietro il caricamento della pagina ed è abbastanza facile da guadagnare. Ciò offre all'utente una sensazione molto rapida e reattiva, migliorando notevolmente l'esperienza dell'utente.
Può sembrare un po 'difficile, ma proviamo a capirlo con l'aiuto di un esempio.
Esempio:
Fare clic qui per modificare il testo innerHTML.
function myFunction () {document.getElementById ('paragraph1'). innerHTML = 'Paragrafo cambiato!' }
Qui nel codice sopra, nel tag del paragrafo l'id di questo è paragrafo1.
il mio tutorial sql per principianti
C'è un funzione denominato myfunction () che verrebbe revocato al clic sul testo 'Fare clic qui per modificare il testo innerHTML'.Quando la funzione viene revocata al clic, viene eseguita la funzione che dice getElementById ('paragrafo1'), che afferma che l'elemento con l'ID come demo deve essere selezionato.
Inoltre, abbiamo la funzione innerHTML che significa semplicemente dopo l'onclick cosa deve essere fatto. Nell'esempio precedente, è semplicemente 'Paragrafo modificato'.
Di seguito è riportato l'output iniziale del codice precedente.
Di seguito è riportato l'output modificato dopo il clic.
algoritmi java e strutture dati
HTML interno con elenco ordinato o non ordinato
Di seguito è riportato un esempio per mostrare l'uso di innerHTML con un elenco ordinato o non ordinato.
Esempio:
- Ciao
- Ciao di nuovo
Fare clic sul pulsante in basso per ottenere il contenuto dell'elemento ul.
Prova la funzione helloFunction () {var x = document.getElementById ('myList'). InnerHTML document.getElementById ('paragraph1'). InnerHTML = x}Qui il innerHTML viene attivato dal pulsante definito dal nome 'Try it'.
L'output iniziale del testo sopra è:
L'output dopo il clic sul pulsante. Il clic sul pulsante non ha portato al ricaricamento della pagina ma è stato invece dovuto all'utilizzo di innerHTML.
c ++ ordinamento array in ordine crescente
InnerHTML per modificare l'URL
Di seguito è riportato un altro esempio che mostra l'uso di innerHTML per modificare l'URL al clic del pulsante.
Esempio:
Wikipedia Modifica funzione di collegamento myFunction () {document.getElementById ('myAnchor'). InnerHTML = 'Google' document.getElementById ('myAnchor'). Href = 'https://www.google.com' document.getElementById ('myAnchor' ) .target = '_blank'}
L'esempio sopra fornisce inizialmente il collegamento al sito Web di Wikipedia, ma quando si fa clic sul pulsante il collegamento cambia in Google.
Esistono diverse operazioni di questo tipo in cui innerHTML è utile quando la pagina non deve essere ricaricata e solo una parte deve essere aggiornata.Ciò consente di risparmiare tempo e meno sforzi per l'approccio.Il più grande vantaggio di innerHTML è l'esperienza utente migliorata con questa funzionalità.
Controlla il di Edureka. La formazione sulla certificazione per lo sviluppo web ti aiuterà a imparare come creare siti Web straordinari utilizzando HTML5, CSS3, Twitter Bootstrap 3, jQuery e API di Google e a distribuirli su Amazon Simple Storage Service (S3).
Hai domande per noi? Per favore menzionalo nella sezione commenti di 'Concatenazione di stringhe in JavaScript' e ti risponderemo.