Come aggiungere o eliminare elementi HTML tramite JavaScript
Questo articolo discuterà le procedure di aggiunta o eliminazione del Elementi HTML Attraverso JavaScript. Dimostreremo anche l'uso dei metodi AppendChild () e InsertBefore () per l'aggiunta degli elementi HTML. Inoltre, verranno forniti esempi relativi ai metodi Rimovi () e RemoveChild () per eliminare gli elementi HTML. Quindi iniziamo!
Come aggiungere elementi HTML tramite JavaScript usando il metodo AppendChild ()
Il metodo JavaScript AppendChild () viene utilizzato per l'aggiunta di un elemento HTML come figlio del nodo genitore specificato. Questo metodo viene utilizzato per spostare gli elementi HTML.
Sintassi di AppendChild () Metodo
parentele.AppendChild (ChildNode);Qui, il parentele è l'elemento HTML che vogliamo dichiarare come un genitore, mentre il ChildNode è l'elemento HTML appena creato che verrà aggiunto al nodo genitore.
Esempio: come aggiungere elementi HTML tramite JavaScript usando il metodo AppendChild ()
In questo esempio, ti mostreremo come usare il "appendChild ()"Metodo per aggiungere gli elementi HTML tramite JavaScript. Prima di tutto, aggiungeremo un'intestazione e un paragrafo usando il
E
Elementi HTML:
Questo è Linuxhint.com
Aggiunta di elementi HTML tramite JavaScript.
Questo è il paragrafo principale.
Questo è il secondo paragrafo.
Nel prossimo passaggio, creeremo un nuovo
elemento "paragrafo"Utilizzando il"createElement ()"Metodo dell'oggetto del documento:
Esegui il programma di cui sopra nel tuo editor di codice preferito o in qualsiasi sandbox di codifica online; Tuttavia, utilizzeremo il JSbin per questo scopo:
Come puoi vedere dall'output di seguito, viene aggiunto un nuovo elemento HTML con il contenuto di testo "Questo è nuovo nodo":
Come aggiungere elementi HTML tramite JavaScript usando il metodo insertBefore ()
Se si desidera inserire un elemento HTML come nodo figlio prima del nodo specificato, è possibile invocare il “insertBefore ()"Metodo JavaScript.
Sintassi del metodo insertMethod ()
parentele.insertBefore (newnode, esistingNode);Qui, il "newnode"È l'elemento HTML appena creato che si desidera aggiungere,"esistente"È l'elemento prima del quale inserirai il tuo elemento HTML e il"parentele"È l'elemento HTML che hai specificato come nodo genitore.
Esempio: come aggiungere elementi HTML tramite JavaScript usando il metodo insertBefore ()
Nell'esempio precedente, abbiamo utilizzato il metodo AppendChild () per aggiungere il nuovo elemento HTML come ultimo figlio dell'HTML. Tuttavia, puoi anche usare il javascript "insertBefore ()"Metodo per aggiungere un elemento HTML prima dell'elemento specificato. L'esempio seguente ti insegnerà l'uso di "insertBefore ()" metodo.
In primo luogo, aggiungeremo un'intestazione e alcuni paragrafi come segue:
Questo è Linuxhint.com
Aggiunta di elementi HTML tramite JavaScript.
Questo è il paragrafo principale.
Questo è il secondo paragrafo.
Successivamente, creeremo un nuovo elemento "paragrafo"Elemento HTML, quindi definire un nodo di testo figlio per esso:
L'esecuzione del programma di cui sopra aggiungerà il "paragrafo"HTML prima"P1":
Come eliminare gli elementi HTML tramite JavaScript utilizzando il metodo REMME ()
Il javascript "rimuovere()"Il metodo viene utilizzato per l'eliminazione dell'elemento HTML specificato dal modello Object Document (DOM).
Sintassi del metodo Rimuovi ()
nodo.rimuovere()Qui, "nodo"Rappresenta l'elemento HTML che si desidera eliminare tramite JavaScript.
Esempio: come eliminare gli elementi HTML tramite JavaScript utilizzando il metodo Rimovi ()
In seguito, abbiamo aggiunto un elemento HTML intestato, un paragrafo
e un elemento che comprende due paragrafi e come nodi figlio:
Questo è Linuxhint.com
Aggiunta di elementi HTML tramite JavaScript.
Questo è il paragrafo principale.
Questo è il secondo paragrafo.
Successivamente, aggiungeremo un pulsante e collegheremo un "al clic" gestore di eventi. Secondo il seguente codice, quando faremo clic su "Rimuovere l'elemento"Pulsante, invocherà il"myFunction ()" metodo:
Nel "myFunction ()"Metodo, in primo luogo, utilizziamo il"documento.getelementbyid"Per trovare l'elemento che vogliamo eliminare specificando il suo"id", Allora invoceremo il"rimuovere()" metodo:
L'output di seguito è indicato "P1"HTML è eliminato dal nostro programma JavaScript con l'aiuto di"rimuovere()" funzione:
Come eliminare gli elementi HTML tramite JavaScript usando il metodo RemoveChild ()
In JavaScript, il "removechild ()"È utilizzato per l'eliminazione di un nodo HTML figlio specifico da un elemento HTML.
Sintassi del metodo RemoveChild ()
parentele.RemovChild (ChildNode)Qui, il genitore è l'elemento HTML che abbiamo specificato come "genitore"Node e ChildNode è l'elemento HTML che vogliamo rimuovere dall'elemento genitore.
Esempio: come eliminare gli elementi HTML tramite JavaScript usando il metodo RemoveChild ()
In questo esempio, proveremo a rimuovere l'elemento figlio del nostro elemento HTML definito:
Questo è Linuxhint.com
Aggiunta di elementi HTML tramite JavaScript.
Questo è il paragrafo principale.
Questo è il secondo paragrafo.
Per eliminare un elemento figlio, prima di tutto, devi creare un "genitore"Elemento HTML e specificare l'elemento HTML che agisce come genitore nel codice JavaScript. Nel nostro caso, abbiamo aggiunto "Div1":
Come puoi vedere che l'elemento figlio dell'elemento HTML viene eliminato correttamente:
Conclusione
Per aggiungere un elemento HTML nel tuo programma JavaScript, è possibile utilizzare il metodo AppendChild () e InsertBefore (), mentre, per eliminare qualsiasi elemento HTML specifico o un nodo HTML figlio, rimuove () e remvechild () requisiti. Questo articolo ha discusso di come aggiungere o eliminare gli elementi HTML tramite JavaScript. Abbiamo anche dimostrato l'uso dei metodi AppendChild () e InsertBefore () per l'aggiunta degli elementi HTML. Inoltre, in questo articolo sono forniti anche esempi relativi ai metodi Rimovi () e RemoveChild () per eliminare gli elementi HTML.