Creare attributi agli elementi, createAttribute() e setAttributeNode()

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.

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.



function inserimento() {
  var link = document.createElement("a");
  link.innerHTML = "Coding Creativo ";
  var att = document.createAttribute("href");
  att.value = "https://www.codingcreativo.it";
  link.setAttributeNode(att);
  var newpage = document.createAttribute("target");
  newpage.value = "_blank";
  link.setAttributeNode(newpage);
  document.getElementById("collegamento").appendChild(link);
}

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:



function inserimento() {
  var image = document.createElement("img");
  var att = document.createAttribute("src");
  att.value = "img/angoli.jpg";
  image.setAttributeNode(att);
  var larghezza = document.createAttribute("width");
  larghezza.value = "200";
  image.setAttributeNode(larghezza);
  document.getElementById("immagine").appendChild(image);
}

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.