Come sostituire il centro di un div usando jQuery?

Come sostituire il centro di un div usando jQuery?

L'innerhtml può essere utilizzato per la scrittura del documento HTML dinamicamente. È principalmente distribuito per la generazione di documenti HTML dinamici, inclusi moduli di commento, moduli di registrazione, collegamenti e molti altri. Inoltre, puoi anche sostituire l'internhtml all'interno di un div con l'aiuto di jQuery. Per farlo, il ".html ()"La funzione viene utilizzata. Quando si fa clic sul pulsante una volta caricato il sito Web, il contenuto all'interno del Div verrà modificato con il contenuto dalla funzione HTML ().

Questo articolo dimostrerà la sostituzione dell'internhtml di un div utilizzando jQuery.

Come sostituire il centro di un div usando jQuery?

Per sostituire l'internhtml di un contenitore DIV utilizzando jQuery, seguire la procedura di seguito.

Passaggio 1: creare un contenitore "div" principale

Inizialmente, crea il principale contenitore "div" utilizzando il ""Elemento e aggiungere un ID all'interno del tag di apertura" div "con un nome particolare.

Passaggio 2: Aggiungi intestazioni

Successivamente, usa qualsiasi tag di intestazione da "H1" A "H6"Per aggiungere un intestazione a una pagina HTML. Ad esempio, abbiamo utilizzato "H1"Per l'intestazione principale e"H2"Per la seconda intestazione. Puoi anche definire lo stile in linea all'interno del tag di rotta.

Passaggio 3: crea un altro contenitore di div

Successivamente, crea un altro contenitore Div seguendo lo stesso metodo nel passaggio precedente.

Passaggio 4: crea un pulsante

Quindi, aggiungi un pulsante con l'aiuto di ""Elemento. Inoltre, aggiungi un "classe"Attributo all'interno del tag di apertura DIV e assegnare due o più nomi di classe a questo attributo. IL "tipo"L'attributo viene utilizzato per specificare il tipo di elemento. Quindi, incorporare il testo tra il "pulsante"Elemento da mostrare sul pulsante:


Linuxhint Ltd UK


Primo contenuto senza alcun cambiamento






L'output del blocco di codice sopra è indicato di seguito:


Passaggio 3: applicare CSS sul contenitore "div"

Accedi al secondo "div"Container con l'aiuto del nome della classe".Second-Div":

.Second-Div
Testo-align: centro;


Dopo aver acceduto al contenitore Div, applica il “allineamento"Proprietà di CSS utilizzato per l'impostazione dell'allineamento del testo.

Produzione


Passaggio 4: inserire la libreria jQuery

Aggiungeremo la libreria jQuery inserendo il seguente collegamento all'interno del tag tra l'elemento principale del file HTML:


Passaggio 5: sostituire Innerhtml di Div

Nel ""Tag, aggiungi il seguente codice:


Nel frammento di codice sopra:

    • Definisci il "pronto()"Funzione che verrà eseguita solo una volta che il modello di oggetti documenti (DOM) della pagina è pronto per il codice JavaScript da eseguire.
    • Fai una funzione per l'elemento pulsante per eseguire l'azione quando l'utente lo colpisce.
    • Ora il "&(selettore).html ()"La funzione viene utilizzata per la sostituzione dell'interno di div. Per fare ciò, aggiungi i dati all'interno del "()" Rimpiazzare.

Si può osservare che l'interno del div è stato modificato quando si fa clic sul pulsante:


Hai imparato a sostituire l'internhtml di un div usando jQuery.

Conclusione

Per sostituire l'internhtml di un div usando jQuery, in primo luogo, inserire un collegamento della libreria jQuery nel tag di script con l'aiuto del "src"Attributo. Poi il "html ()"La funzione è usata come"&(selettore).html". Per farlo, il "$ ("#Primo div").html"È utilizzato in questo scenario. Questo articolo ha spiegato il metodo per sostituire l'internhtml di un contenitore di div che utilizza jQuery.