Come aggiungere il codice HTML a un div usando JavaScript?
In questo articolo, te lo diremo
- Come aggiungere il codice HTML a un div usando JavaScript?
- Come aggiungere il codice HTML utilizzando InnerHTML?
- Come aggiungere il codice HTML utilizzando insertAdJactHTML?
Come aggiungere il codice HTML a un div usando JavaScript?
In JavaScript, ci sono due modi per aggiungere il codice HTML a un div. Questi modi sono i seguenti
- Aggiungi utilizzando InnerHTML
- Aggiungi utilizzando insertAdjacenthtml
Proviamo a comprendere i due metodi sopra per aggiungere HTML a un div in JavaScript con esempi e spiegazioni adeguate.
Come aggiungere il codice HTML utilizzando InnerHTML?
La proprietà InnerHTML viene utilizzata per modificare il contenuto all'interno di un Div o qualsiasi tag HTML. Sostituisce totalmente il contenuto di div esistente con il nuovo contenuto ma per utilizzare questa proprietà un div deve essere assegnato con un unico id e id dovrebbe essere sempre univoco.
Codice:
Elaborazione per aggiungere il codice HTML utilizzando JavaScript
In questo codice, creiamo un semplice documento HTML con un tag di intestazione e un tag DIV vuoto con un ID univoco controllo. Quindi utilizziamo la proprietà JavaScript InnerHTML per aggiungere il codice HTML all'interno del Div vuoto.
Produzione:
L'output mostra chiaramente che aggiungiamo HTML Tag con alcuni contenuti e styling all'interno del tag DIV vuoto usando InnerHTML tramite JavaScript.
Come aggiungere utilizzando InsertAdjacenthtml?
In JavaScript, InsertAdjacenthtml è un altro metodo che viene utilizzato per aggiungere il codice HTML in un div tramite JavaScript. Questo metodo prende 2 argomenti, il primo argomento specifica la posizione del contenuto in un div e il secondo argomento è il codice HTML effettivo che si desidera aggiungere in un div.
Questo metodo utilizza quattro posizioni per aggiungere il contenuto HTML in un div:
- prima di essere
- in anticipo
- Afterbegin
- dopo end
Passiamo attraverso tutte queste posizioni una per una.
prima di essere
Nel codice seguente, questo attributo posizionerà il codice HTML prima del controllo id div.
Codice:
Elaborazione per aggiungere il codice HTML utilizzando JavaScript
Questo paragrafo è scritto per dimostrare il processo di aggiunta del codice HTML in un div usando JavaScript.
In questo codice, creiamo un semplice documento HTML con tag e a Avere ID univoco controllo. All'interno di questo div viene scritto un paragrafo usando . Ora aggiungiamo HTML Produzione: L'output lo mostra chiaramente insertAdjacenthtml Il metodo aggiunge il codice HTML prima del Div target perché utilizziamo il suo attributo prima per posizionare il nostro codice HTML aggiunto. prima end Codice: Questo paragrafo è scritto per dimostrare il processo di aggiunta del codice HTML in un div usando JavaScript. In questo codice, creiamo un semplice documento HTML con tag e a Avere ID univoco controllo. All'interno di questo div viene scritto un paragrafo usando . Ora aggiungiamo HTML Produzione: L'output lo mostra chiaramente insertAdjacenthtml Il metodo aggiunge il codice HTML dopo il Afterbegin Codice: Questo paragrafo è scritto per dimostrare il processo di aggiunta del codice HTML in un div usando JavaScript. In questo codice, creiamo un semplice documento HTML con tag e a Avere ID univoco controllo. All'interno di questo div viene scritto un paragrafo usando . Ora aggiungiamo HTML Produzione: L'output lo mostra chiaramente insertAdjacenthtml Il metodo aggiunge il codice HTML all'interno del Div mirato ma poco prima del dopo end Codice: Questo paragrafo è scritto per dimostrare il processo di aggiunta del codice HTML in un div usando JavaScript. In questo codice, creiamo un semplice documento HTML con tag e a Avere un ID univoco controllo. All'interno di questo div viene scritto un paragrafo usando . Ora aggiungiamo HTML Produzione: L'output lo mostra chiaramente insertAdjacenthtml Il metodo aggiunge il codice HTML dopo il Div mirato perché utilizziamo il suo attributo AfterEnd per posizionare il nostro codice HTML aggiunto. Conclusione In JavaScript, possiamo aggiungere il codice HTML a un div usando Innerhtml E insertAdjacenthtml. InnerHTML aggiunge il codice HTML sostituendo il contenuto corrente in un div con nuovi contenuti, mentre InsertAdJacenthTML aggiunge il codice HTML posizionando, utilizzando prima ebegin, afterbegin, davanti a endend e dopo endend attributi. In questo articolo, abbiamo appreso il processo di aggiunta del codice HTML a un div usando JavaScript.
Nel seguente codice, questo attributo posizionerà il codice HTML all'interno del controllo id div ma dopo il Elaborazione per aggiungere il codice HTML utilizzando JavaScript
Nel seguente codice, questo attributo posizionerà il codice HTML all'interno del controllo id div ma poco prima del Elaborazione per aggiungere il codice HTML utilizzando JavaScript
Nel seguente codice, questo attributo posizionerà il codice HTML dopo il controllo id div.Elaborazione per aggiungere il codice HTML utilizzando JavaScript