Creare attributi agli elementi

Studieremo in questo tutorial come creare attributi agli elementi, utilizzando createAttribute() e setAttributeNode().

Nell'articolo precedente abbiamo visto come creare nuovi elementi come ad esempio paragrafi, livelli, titoli, ecc...

Per chi volesse consultare la lezione può visitare il seguente link:

https://www.codingcreativo.it/creare-elementi-dom-javascript/.

CreateAttribute() - creare attributi agli elementi nel DOM con JavaScript

Con il metodo createAttribute() si possono aggiungere uno o più attributi agli elementi creati.

Da zero ad eroe

Entra nel mondo della programmazione web: variabili, funzioni, array, DOM, eventi. Con esercizi pratici e progetti coinvolgenti.

8 ore di corso registrato
Più di 50 algoritmi risolti passo passo
Livello base — da zero ad eroe
100% online, fruibile quando vuoi

La sintassi è dunque questa:

element.createAttribute(nome_attributo);

dove nome_attributo è un attributo qualsiasi del tag creato.

Creare attributi agli elementi nel DOM con JavaScript - esempio 1

Dopo aver creato l'attributo con createAttribute(), utilizzeremo il metodo setAttributeNode(), per associare l'attributo ad un elemento.

Facciamo quindi un esempio per capire meglio il funzionamento.

Qui inserirò il collegamento:

Provate quindi a cliccare sul pulsante sopra, apparirà il link al sito Coding Creativo. Se cliccate sopra al link si aprirà una nuova pagina, che ad ogni modo potete chiudere per ritornare al tutorial.

Procedimento

Quindi innanzitutto creo il livello dove visualizzare il collegamento che voglio creare. Subito sotto creo il pulsante che dovrà essere cliccato per far comparire il nuovo collegamento.

<div id="collegamento">Qui inserirò il collegamento: </div>
<input type="submit" onclick="inserimento()" value="insert">

Passo adesso a creare il codice JavaScript. Creo quindi una funzione inserimento() che verrà richiamata quando verrà attivato l'evento onclick sul pulsante.

Quindi, all'interno della funzione, creo il nuovo elemento a con il metodo createElement(), come abbiamo fatto nel precedente tutorial.

Dopo tra il tag di apertura e di chiusura scrivo il testo Coding Creativo utilizzando la proprietà innerHTML.

Creo una variabile a cui assegno l'attributo creato con il metodo createAttribute(), in questo caso href. Successivamente gli dò il valore del sito web: https://www.codingcreativo.it.

Infine con setAttributeNode() associo l'attributo appena creato al tag a.

Dopo creo l'attributo blank=_target con la stessa modalità per far sì che il sito si apra in una nuova pagina.

Infine con il metodo getElementById() ricavo l'id del livello e con appendChild() aggiungo il tag creato con i suoi attributi.

<div id="collegamento"></div>
<button onclick="inserimento()">Aggiungi link</button>

<script>
function inserimento() {
  // Creiamo un nuovo elemento <a>
  const link = document.createElement("a");

  // Impostiamo il testo del link
  link.innerHTML = "Coding Creativo ";

  // Creiamo e impostiamo l'attributo href
  const att = document.createAttribute("href");
  att.value = "https://www.codingcreativo.it";
  link.setAttributeNode(att);

  // Creiamo e impostiamo l'attributo target per aprire il link in una nuova scheda
  const newpage = document.createAttribute("target");
  newpage.value = "_blank";
  link.setAttributeNode(newpage);

  // Aggiungiamo il link all'interno del div con id "collegamento"
  document.getElementById("collegamento").appendChild(link);
}
</script>

Creare attributi agli elementi nel DOM con JavaScript - esempio 2

Facciamo adesso un altro esempio con l'utilizzo di createAttribute().

Qui inserirò l'immagine:

Provate quindi a cliccare sul pulsante, apparirà un'immagine di dimensione 200px. Se cliccate nuovamente, come negli altri casi si riproduce il tag.

Procedimento

Come prima creiamo il livello dove far apparire l'immagine ed il pulsante:

<div id="immagine">Qui inserirò l'immagine: </div>
<input type="submit" onclick="inserimento()" value="insert">

Poi in maniera simile all'esempio precedente creo il codice javascript:

<div id="immagine"></div>
<button onclick="inserimento()">Aggiungi immagine</button>

<script>
function inserimento() {
  // Creiamo un nuovo elemento <img>
  const image = document.createElement("img");

  // Creiamo e impostiamo l'attributo src
  const att = document.createAttribute("src");
  att.value = "img/angoli.jpg";
  image.setAttributeNode(att);

  // Creiamo e impostiamo l'attributo width
  const larghezza = document.createAttribute("width");
  larghezza.value = "200";
  image.setAttributeNode(larghezza);

  // Aggiungiamo l'immagine al div con id "immagine"
  document.getElementById("immagine").appendChild(image);
}
</script>

Questa volta mi sono serviti l'attributo src per indicare il percorso dell'immagine e l'attributo width per la larghezza.

Chiaramente dovete indicare il percorso della vostra immagine.