Javascript Append

Michael Zippo 04.11.2021

Il metodo JavaScript appendChild () aggiunge un elemento alla fine di un nodo. appendChild() viene spesso utilizzato per aggiungere

elementi a un elenco. È necessario utilizzare più istruzioni appendChild() se si desidera aggiungere più di un elemento a un nodo.

Alcuni elenchi contengono testo; altre directory contengono immagini; altri elenchi contengono elementi Web personalizzati. Indipendentemente dal contenuto di un elenco, una cosa è certa: le pagine Web sono piene di elenchi.

Quando crei un elenco, di solito ne codifichi i valori ‚Äã‚Äãin HTML. Questo processo può essere accelerato utilizzando un metodo chiamato JavaScript appendChild. Questo metodo ti consente di aggiungere un elemento alla fine di un elenco o un altro elemento web, come un blockquote.

In questa guida parleremo di cosa appendChild ( ) è in JavaScript e come funziona. Vedremo un esempio per iniziare. Iniziamo!

Cos`è appendChild JavaScript?

appendChild () aggiunge un nodo alla fine di un nodo padre. appendChild () è comunemente usato per aggiungere elementi a un elenco HTML. Un nodo fa riferimento a qualsiasi elemento del Document Object Model (DOM) HTML.

La sintassi di appendChild () è simile a questa:

"genitore" si riferisce all`elemento a cui vuoi aggiungere un figlio. "Figlio" è l`elemento che vuoi aggiungere alla fine del genitore.

Devi utilizzare un metodo come JavaScript getElementById() o un altro "Ottieni" per recuperare un elemento. In alternativa, puoi creare un elemento HTML in JavaScript e quindi utilizzare quell`elemento come oggetto "genitore" con appendChild ().

Ad esempio, un elenco di ricette di scone sarebbe contengono un elenco di nodi. Questi nodi sarebbero probabilmente

perché creeremmo un elenco.

Un genitore

Impostazione di un front-end

In primo luogo, inseriremo un`interfaccia di base che mostra la nostra lista di nomi di studenti. Apri un file chiamato index.html e incolla questo codice:

Abbiamo creato un documento HTML di base. Questo documento contiene un titolo e un elenco senza sottoelementi. L`elenco è rappresentato dal tag
.
Adesso aggiungiamo alcuni stili alla nostra pagina in un file chiamato styles.css per migliorare l`estetica del nostro web pa ge:

Questa regola CSS definirà un colore di sfondo grigio chiaro per la nostra pagina. A tale scopo, utilizziamo la proprietà CSS background-color . Sposta anche il contenuto del tag al centro della pagina. Per ulteriori informazioni su come abbiamo strutturato il layout, consulta la nostra Guida ai modelli CSS Box .
La nostra pagina non funziona ancora. Non abbiamo aggiunto nulla alla lista. Questo è ciò che i nostri sguardi pagina come quando lo si apre in un browser:

const student = document.querySelector (" ul ");

Questa riga di codice selezionerà l`elemento sul nostro pagina con il tag
Questo rappresenta la nostra lista. Successivamente, creeremo un elemento da aggiungere alla nostra lista:

T il suo codice crea un nodo di testo con un tag
che contiene la parola "Steven". Ora non ci resta che aggiungere il nostro elemento appena creato alla nostra lista.

Javascript Append

Cos`è appendChild JavaScript?

Impostazione di un front-end

Utilizzare il metodo JavaScript appendChild ()