JavaScript Append Data a Div

Durante la manutenzione di una pagina web o di un sito Web, ci sono situazioni in cui è necessario un aggiornamento di volta in volta. In tal caso, è necessario aggiungere alcuni dati su un input particolare degli utenti per creare e mantenere i record. Inoltre, l'aggiunta di dati a Div è anche di grande aiuto nell'integrazione di HTML con JavaScript per applicare funzionalità aggiunte.

Come aggiungere i dati a Div in JavaScript?

I seguenti approcci possono essere utilizzati per aggiungere dati a divish in JavaScript:

• "Innerhtml" proprietà.
• "insertAdJacenthtml ()" metodo.
• "appendChild ()" metodo.
• "jQuery" approccio.

Approccio 1: Aggiungi i dati a Div in JavaScript utilizzando la proprietà InnerHTML

IL "Innerhtml"La proprietà restituisce il contenuto HTML interiore dell'elemento.Questo approccio può essere applicato per aggiungere dati all'immagine e al pulsante inclusi nel "div"Elemento al clic del pulsante.

Sintassi

elemento.Innerhtml

Nella sintassi data:

• "elemento"Si riferisce all'elemento a cui verrà restituito il contenuto HTML.

Esempio

Diamo un'occhiata alle seguenti righe di codice:

Fare clic per aggiungere i dati

Nel codice sopra:

• Specificare la "div"Elemento con il specificato"id".
• Successivamente, includi un'immagine nell'elemento Div.
• Inoltre, crea un pulsante all'interno dell'elemento Div con un allegato "al clic"Reindirizzamento degli eventi alla funzione AppendData ().

Passa alla parte JavaScript del codice:

Nella parte JS del codice, seguire i passaggi indicati seguenti:

• Dichiarare una funzione denominata "appendData ()".
• Nella sua definizione, accedi al "div"Elemento dal suo ID usando il"documento.getElementById ()" metodo.
• Infine, applica il "Innerhtml"Proprietà per aggiungere il messaggio indicato insieme all'immagine inclusa e al pulsante creato in"div".

Produzione

Può essere osservato nell'output sopra che il messaggio dichiarato viene aggiunto all'immagine sul clic del pulsante.

Approccio 2: Aggiungi i dati a Div in JavaScript utilizzando il metodo InsertAdJacenthtml ()

IL "insertAdJacenthtml ()"Il metodo inserisce i dati HTML nella posizione specificata.Questo metodo può essere utilizzato per aggiungere i dati alla fine di "div"Dopo aver selezionato un'opzione specifica.

Sintassi

elemento.insertAdjacenthtml (posizione, html)

Nella sintassi sopra:

• "posizione"Si riferisce alla posizione rispetto all'elemento.
• "html"Punti all'HTML da inserire.

Esempio

Dai un'occhiata al seguente frammento di codice:

È JavaScript un linguaggio di programmazione?

SÌ
NO

Nel codice HTML sopra:

• Ripeti i passaggi discussi per includere il "div"Elemento con il specificato"id".
• Inoltre, includi l'intestazione specificata nel "

  "Tag.

• Dopodiché, includi due "Radio"Pulsanti con una che invoca la funzione AppendData (). Ciò comporterà l'avvio dei dati solo al momento della selezione dell'opzione "SÌ".

Passa alla parte JavaScript del codice:

Nel codice JS sopra, segui questi passaggi:

• Dichiarare una funzione denominata "appendData ()".
• Nella sua definizione, accedi al "div"Elemento in modo simile usando il"documento.getElementById ()" metodo.
• Infine, applica il “insertAdJacenthtml ()Metodo "specificando il"posizione"Come primo parametro per aggiungere i dati specificati. In questo scenario, i dati saranno aggiunti alla fine.

Produzione

Nell'output sopra, è evidente che il "successo"Il messaggio viene aggiunto solo facendo clic sull'opzione"SÌ".

Approccio 3: Aggiungi i dati a Div in JavaScript utilizzando il metodo AppendChild ()

IL "appendChild ()"Il metodo aggiunge un elemento nodo come ultimo figlio dell'elemento. Questo approccio può essere utilizzato per aggiungere i dati in modo simile alla fine al clic del pulsante.

Sintassi

elemento.AppendChild (nodo)

Nella sintassi data:

• "nodo"Indica il nodo da aggiungere.

Nota a margine: Un metodo aggiuntivo "createtextNode ()"Verrà anche applicato nell'esempio seguente. Viene semplicemente applicato per creare un nodo di testo.

Esempio

Seguiamo l'esempio seguente di seguito passo dopo passo:

JavaScript

Fare clic per aggiungere i dati

Nel codice HTML sopra:

• Ricorda gli approcci discussi per includere il "div"Elemento con il specificato"id"E un'intestazione.
• Allo stesso modo, includi un pulsante con "al clic"Evento allegato che reindirizzerà alla funzione AppendData ().

Seguiamo la parte JavaScript dichiarata del codice:

In questa parte del codice, eseguire i seguenti passaggi:

• Definire una funzione chiamata "appendData ()".
• Nella sua definizione, allo stesso modo, accedi al "div"Elemento come discusso.
• Nel passaggio successivo, applica il "createtextNode ()"Metodo per creare il nodo di testo specificato.
• Infine, aggiungi il nodo di testo creato alla fine di "div".

Produzione

Nell'output, è evidente che il paragrafo risultante viene aggiunto al "div"Al clic sul pulsante.

Approccio 4: Aggiungi i dati a Div in JavaScript utilizzando l'approccio jQuery

IL "jQuery"L'approccio può essere utilizzato per accedere al"div"Elemento direttamente e aggiungi un'intestazione in esso (div) sul clic del pulsante.

Esempio

Seguiamo l'esempio seguente di seguito passo dopo passo:

Il contenuto di questo sito è:

Fare clic per aggiungere i dati

Nel codice sopra, seguire i passaggi indicati seguenti:

• Includi la libreria jQuery per applicare i suoi metodi.
• Rivivi i passaggi per specificare il "div"Elemento con il specificato"id".
• All'interno del "div", Includi l'intestazione dichiarata e un"pulsante" con un "al clic"Evento che invoca la funzione appendData ().

Continuiamo alla parte JavaScript del codice:

Nella parte JS sopra del codice, eseguire i seguenti passaggi:

• Definire una funzione chiamata "appendData ()".
• Nella sua definizione, accedi all'elemento Div direttamente con "id".
• Dopodiché, applica il "aggiungere()"Metodo per l'accesso"div"E includi l'intestazione dichiarata.

Produzione

Nell'output, il clic del pulsante porta ad aggiungere l'intestazione risultante nella "div".

Questo articolo ha dimostrato gli approcci agli appendici dati a div in javascript.

Conclusione

IL "Innerhtml"Proprietà, la"insertAdJacenthtml ()Metodo ", il"appendChild ()Metodo o il "jQuery"L'approccio può essere utilizzato per aggiungere dati a divista in javascript. La proprietà InnerHTML può essere utilizzata per aggiungere i dati all'immagine inclusa e un pulsante in “div"Elemento al clic del pulsante. Il metodo insertAdjacenthtml () può essere applicato per aggiungere i dati rispetto alla posizione specificata come parametro. Il metodo AppendChild () in combinazione con "createtextNode ()"Il metodo può essere utilizzato per creare prima un nodo di testo e quindi aggiungerlo alla fine del div. L'approccio jQuery può essere utilizzato per recuperare direttamente l'elemento Div e aggiungere un'intestazione al clic del pulsante. Questo blog ha spiegato per aggiungere dati a div in javascript.