---
name: crea-elemento
description: Usare quando l'utente deve creare nuovi elementi HTML dinamicamente con tag, classe e contenuto testuale.
---

# Crea Elemento

Questa skill semplifica la creazione dinamica di elementi DOM, riducendo il codice boilerplate necessario. Crea un nuovo elemento HTML con tag, classe CSS e contenuto testuale opzionali.

## Procedura

1. **Creare un elemento**: Chiamare `crea(tag, classe, testo)`
2. **Aggiungere al DOM**: Usare `appendChild()` o `insertBefore()` sul parent
3. **Personalizzare**: Aggiungere altri attributi dopo la creazione

## Regole

- `tag` è obbligatorio e deve essere un tag HTML valido (es: 'div', 'p', 'span')
- `classe` e `testo` sono opzionali (stringhe vuote per Default)
- Restituisce l'elemento DOM creato, pronto per essere appeso
- Il testo viene inserito come `textContent` (sicuro contro XSS)

## Esempi

### Esempio 1: Creare un div semplice

```javascript
const myDiv = crea('div');
document.body.appendChild(myDiv);
```

### Esempio 2: Creare un elemento con classe e testo

```javascript
const box = crea('div', 'box', 'Ciao Mondo!');
document.body.appendChild(box);
// Crea: <div class="box">Ciao Mondo!</div>
```

### Esempio 3: Creare una lista

```javascript
const ul = crea('ul', 'my-list');
['Item 1', 'Item 2', 'Item 3'].forEach(text => {
    const li = crea('li', '', text);
    ul.appendChild(li);
});
document.body.appendChild(ul);
```

### Esempio 4: Creare con più classi

```javascript
const element = crea('p', 'text-primary bold large', 'Testo formattato');
// classe: "text-primary bold large"
```

## Dettagli Aggiuntivi

- **Metodo**: Usa `document.createElement(tag)` nativo
- **Classe**: Assegnata tramite `element.className`
- **Testo**: Assegnato tramite `element.textContent`
- **Sicurezza**: `textContent` previene attacchi XSS
- **Prestazioni**: O(1) per la creazione dell'elemento
- **Multi-classi**: Separare con spazi: `"classe1 classe2 classe3"`