Inoltre a poter modificare gli elementi utilizzando il getElementById, è possibile modificare la struttura della pagina Html aggiungendone o rimuovendone altri.

Come esempio, vi spiego come aggiungere un’immagine alla pagina.

Creazione elementi

È necessario creare una variabile contenente il riferimento all’elemento in cui vogliamo mettere l’immagine utilizzando il getElementById.
Nel caso la si voglia mettere in una div, il codice può essere il seguente:
var contenitore = document.getElementById("idDiv");
Per creare l’elemento si utilizza il metodo document.createElement, passandogli una stringa contenente il nome del tag che si vuole creare per poi mettere il suo risultato in una seconda variabile
var elemento = document.createElement("img");
Per creare gli attributi invece si fa in modo analogo alla creazione di un elemento ma utilizzando il metodo document.createAttribute:
var attributo1 = document.createAttribute("src");
var attributo2 = document.createAttribute("id");
Infine, per dargli un valore è sufficiente questo semplice assegnamento:
attributo1.value = "immagine.png";
attributo2.value = "immagineAggiunta"

Inserimento elementi nella pagina

Il passo finale è dire dove e come aggiungere l’elemento appena creato.
I metodi principali sono i seguenti:

• appendChild

  Aggiunge l’elemento in fondo alla div.
  contenitore.appendChild(elemento);

• insertBefore

  Aggiunge l’elemento prima di un altro elemento. Con questo metodo, non serve avere il riferimento al suo contenitore, ma serve il riferimento all’elemento che deve precedere. Quindi, se si vuole aggiungere l’elemento prima della div utilizzata prima, il codice sarà questo:
  document.body.insertBefore(elemento, contenitore);

• insertAfter

  Il funzionamento è analogo a quello dell’insertBefore, tranne per il fatto che aggiunge dopo e non prima ad un elemento già esistente.
  document.body.insertAfter(elemento, contenitore);

• replaceChild

  Questo metodo mette il nuovo elemento nella stessa posizione di uno già esistente, eliminandolo. Se, per esempio, lo si vuole sostituire al primo elemento della nostra div “contenitore”, il codice è il seguente:
  var elementoDaRimpiazzare = contenitore.firstChild();
contenitore.replaceChild(elemento, elementoDaRimpiazzare);

Eliminazione elementi dalla pagina

Per rimuovere un elemento, è sufficente sapere il suo id, il riferimento all’oggetto che lo contiene e utilizzare il metodo removeChild. Nel caso in sui si voglia rimuovere l’immagine aggiunta nel paragrafo precedente, il codice sarà questo: contenitore.removeChild("immagineAggiunta");
È possibile anche rimuovere un singolo attributo ad un elemento con metodo removeAttribute passandogli una stringa contenente il suo nome. elemento.removeAttribute("id");

Please follow and like us: