PricingLoginStart free
Frontend Academy · Lezione

Creazione e aggiunta di elementi

Utilizzi createElement, setAttribute, append e remove per creare e modificare dinamicamente la struttura del DOM.

Lezione 4 di 413 passaggi

Creazione e aggiunta di elementi è una lezione Frontend Academy gratuita su CoddyKit. Questa è la lezione 4 di 4. Puoi leggere la lezione completa qui gratuitamente — poi esercitati direttamente nel browser con un editor di codice integrato e un tutor IA disponibile 24/7. Fa parte del percorso di apprendimento Frontend Academy, e i tuoi progressi si sincronizzano tra il web e l'app CoddyKit. Il corso Frontend Academy include 4 lezioni in totale.

createElement

document.createElement(tagName) crea un nuovo elemento in memoria: l'elemento non si trova ancora nel DOM. È quindi possibile impostarne le proprietà e aggiungerlo all'albero.

const btn = document.createElement('button');
btn.textContent = 'Click Me';
btn.classList.add('btn-primary');
btn.setAttribute('type', 'button');
// btn is in memory, not yet in the page

append e appendChild

parent.append(child) aggiunge un nodo o una stringa alla fine dei figli di parent. appendChild è l'equivalente meno recente, ma append è più flessibile: accetta più nodi e stringhe.

const list = document.querySelector('ul');
const item = document.createElement('li');
item.textContent = 'New item';
list.append(item); // adds to end of list

prepend, before, after

parent.prepend() aggiunge all'inizio. element.before() inserisce prima dell'elemento. element.after() inserisce dopo di esso.

const header = document.querySelector('.card-header');
const icon = document.createElement('img');
icon.src = 'icon.svg';
header.prepend(icon); // icon goes before all other children

const divider = document.createElement('hr');
header.after(divider); // divider goes after the header

insertAdjacentHTML

element.insertAdjacentHTML(position, htmlString) inserisce HTML in una posizione specificata senza sostituire il contenuto esistente. Posizioni: 'beforebegin', 'afterbegin', 'beforeend', 'afterend'.

const container = document.querySelector('.list');
container.insertAdjacentHTML('beforeend', `
  <li class="item">
    <span class="name">Alice</span>
  </li>
`);
// Still avoid with user input — XSS risk

cloneNode

element.cloneNode(true) crea una copia profonda di un elemento, inclusi tutti i suoi elementi figli. Passi false per una copia superficiale. È utile per duplicare gli elementi di un template.

const template = document.querySelector('.card-template');
const clone = template.cloneNode(true);
clone.querySelector('.card-title').textContent = 'New Card';
container.append(clone);

removeChild e remove()

element.remove() rimuove l'elemento dal DOM. Funziona anche il metodo precedente parent.removeChild(child). Gli elementi rimossi possono comunque essere referenziati nelle variabili e aggiunti nuovamente.

const item = document.querySelector('.to-delete');
item.remove(); // clean modern syntax

replaceWith

oldElement.replaceWith(newElement) sostituisce il vecchio elemento nel DOM con quello nuovo. È più pratico del precedente schema basato su replaceChild.

const old = document.querySelector('.old-banner');
const fresh = document.createElement('div');
fresh.className = 'new-banner';
fresh.textContent = 'Updated!';
old.replaceWith(fresh);

DocumentFragment per inserimenti in blocco

Un DocumentFragment è un contenitore leggero che non esiste nel DOM. Costruisca al suo interno un sottoalbero, quindi lo aggiunga con una sola operazione: in questo modo si verifica un solo reflow invece di N.

const fragment = document.createDocumentFragment();
users.forEach(user => {
  const li = document.createElement('li');
  li.textContent = user.name;
  fragment.append(li);
});
// One DOM write:
document.querySelector('ul').append(fragment);

L'elemento &lt;template&gt;

L'elemento HTML <template> contiene markup che non viene visualizzato finché non viene clonato con JavaScript. È preferibile alla costruzione di stringhe o alla clonazione di elementi visibili.

<template id="card-tpl">
  <div class="card">
    <h3 class="card-title"></h3>
    <p class="card-body"></p>
  </div>
</template>

Impostazione di proprietà e attributi

Le proprietà degli elementi (el.href, el.src, el.value) sono spesso il modo più diretto ed efficiente per impostare i valori. Gli attributi (setAttribute) sono ideali per gli attributi personalizzati o ARIA che non hanno una proprietà DOM corrispondente.

// Property (preferred for standard HTML attributes):
img.src = '/photo.webp';
link.href = '/about';

// setAttribute (for ARIA and custom attributes):
button.setAttribute('aria-expanded', 'true');
div.setAttribute('data-index', '3');

Evitare innerHTML con contenuti forniti dall'utente

Quando crea elementi a partire da dati forniti dall'utente, utilizzi sempre i metodi del DOM (createElement, textContent, setAttribute) invece di creare una stringa HTML e usare innerHTML. Non inserisca mai l'input dell'utente in stringhe HTML tramite interpolazione.

// DANGEROUS:
container.innerHTML = `<p>${userComment}</p>`;

// SAFE:
const p = document.createElement('p');
p.textContent = userComment;
container.append(p);

Verifica rapida

Deve aggiungere 100 elementi a un elenco in un <ul> senza causare 100 reflow. Qual è l'approccio migliore?

Rispondi nella lezione interattiva

Riepilogo: creazione di elementi DOM

createElement crea in memoria. append/prepend/before/after inseriscono nell'albero. remove() elimina un elemento. DocumentFragment raggruppa gli inserimenti per migliorare le prestazioni. L'elemento