Come aggiungere un figlio in DOM utilizzando il metodo AppendChild in JavaScript?

Se si desidera modificare qualsiasi elemento in HTML usando il linguaggio di scripting, è necessario fare riferimento anche a DOM noto come modello di oggetti documenti. DOM al suo core è una semplice interfaccia di programmazione per quel file HTML o in altre parole per la pagina Web specifica. Nessun linguaggio di scripting è di alcuna utilità senza un'interfaccia DOM quando si tratta di manipolare gli elementi HTML.

Una delle manipolazioni della pagina web più comuni è sostituire un nodo o aggiungere un nodo figlio all'interno di un nodo genitore. Questo può essere fatto attraverso il appendChild () Metodo in JavaScript.

Cosa è .Metodo AppendChild ()

IL .appendChild () Il metodo è una funzione JavaScript integrata che viene utilizzata per aggiungere un nodo figlio sotto un nodo genitore. IL .appendChild () esegue questa impresa facendo uso del Interfaccia nodo DOM. Ora abbiamo familiarità con quello che fa, quindi guardiamo la sua sintassi.

Sintassi di .Metodo AppendChild ()

La sintassi di .appendChild () è piuttosto autoesplicativo. È come:

parentele.AppendChild (ChildNode);

Come puoi vedere chiaramente, consiste nei seguenti:

• parentele: L'elemento in cui deve essere aggiunto l'altro nodo.
• ChildNode: L'elemento da aggiungere.

Quando è utilizzato il metodo AppendChild ()

IL .appendChild () Aggiunge un elemento appena creato all'interno del DOM. Viene anche usato quando è necessario riorganizzare un elemento già esistente. Nella maggior parte dei casi, entrambe le funzionalità, riorganizzando gli elementi esistenti e creando un nuovo elemento, e quindi aggiungendolo al DOM viene fatto su un evento invocato a causa dell'interazione dell'utente con la pagina Web. Questo evento potrebbe fare clic su un pulsante sullo schermo, una posizione specifica del mouse o persino uno specifico raggio di chiave.

Esempio

Non possiamo imparare nulla finché non lo proviamo. Quindi proviamo a usare il .appendChild () metodo. Noi:

• Crea una pagina HTML con un nodo genitore
• Crea un pulsante che invocerà il processo di aggiunta
• Crea un nodo figlio.
• Aggiungi il nodo figlio nel nodo principale sul pulsante Premere.

Cominciamo con il primo passaggio che è impostare una pagina HTML. Crea un nodo genitore creando un div con un id = "demo": All'interno di questo div, gli diamo un nodo figlio che è un

etichetta:

Questo è il paragrafo 1 all'interno del tag "div"

Facciamo il nodo genitore che è nel nostro caso il

tagga anche un po 'di spicco dandogli un colore di sfondo. Per fare ciò, usa l'id = "demo" e dagli un po 'di stile CSS con le seguenti righe

Otterremo i seguenti risultati.

Ora sappiamo che il nodo genitore di

Il tag è evidenziato. Se aggiungiamo un nodo figlio all'interno di questo nodo genitore, l'area evidenziata aumenterebbe.

Tornando ad aggiungere un nodo figlio. Creiamo un grilletto per aggiungere un nodo figlio e, a tale scopo, aggiungeremo un pulsante sullo schermo con la riga seguente:

Fai clic su AppendChild

Con questo, il nostro output diventa:

Dobbiamo dichiarare la funzione che aggiungerà un nodo figlio all'interno del div Su ogni pulsante Premere. Crea la funzione come questa:

Sia il contatore = 2;
funzione btnClicked ()
// Aggiungi il codice successivo qui.

Come potresti notare, abbiamo creato una variabile chiamata "Counter". Questa variabile manterrà un controllo su quanti nodi figlio abbiamo aggiunto nel nodo principale. Dal momento che abbiamo già un

etichetta Come primo figlio, iniziamo il contatore da "2".

Ora abbiamo bisogno di un nodo figlio. Per questo, creeremo a

etichetta con un po 'di testo al suo interno. Per creare un

tag, dobbiamo prima creare un TextNode e a nodo di paragrafo e quindi aggiungere il nodo di testo nel

etichetta nodo.

Creare un TextNode con il seguente comando:

textNode = document.CreateTextNode ("Questo è paragrafo" + contatore + 'all'interno "div" tag');

Come puoi vedere, stiamo usando il valore contatore per indurre l'utente a quanti nodi figlio sono presenti nel nodo genitore.

Il prossimo è creare il

Elemento tag:

PTAG = Documento.createElement ("p");

Ora dobbiamo aggiungere il TextNode dentro ptag:

ptag.AppendChild (TextNode);

Infine, dobbiamo aggiungerlo ptag dentro il div con il id = "demo":

parenteNode = document.getElementById ("demo");
parentele.AppendChild (PTAG);

Prima di uscire dal btnClicked () funzione, dobbiamo aumentare anche il valore del contatore:

contatore ++;

Lo snippet di codice completo sarà simile a questo:

È ora di eseguire finalmente la nostra pagina web e guardare i risultati. Dovresti vederlo sul tuo schermo:

Ecco qua, abbiamo aggiunto con successo vari nodi figlio all'interno di un nodo genitore. Possiamo anche confermarlo esaminando il nodo principale all'interno degli strumenti per sviluppatori del browser.

Possiamo vedere chiaramente che tutti i nodi infantili (

tag) sono effettivamente aggiunti al div con il id = "demo".

Conclusione

IL .appendChild () Il metodo di JavaScript viene utilizzato per aggiungere un nodo figlio all'interno di un nodo genitore con l'aiuto dell'interfaccia del nodo DOM. Manipolare gli elementi della pagina web usando un linguaggio di scripting è un compito importante. Uno dei compiti comuni durante la manipolazione delle pagine Web è aggiungere elementi come nodi per bambini ad altri elementi. Abbiamo imparato come il .appendChild () Il metodo funziona, la sua sintassi e quando viene utilizzato. Abbiamo creato una pagina web HTML, un nodo principale e nodi figlio aggiunti al suo interno usando il .appendChild () funzione.