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.

La sintassi è dunque questa:

element.createAttribute(nome_attributo);

dove nome_attributo è un attributo qualsiasi del tag creato.


SetAttributeNode() – associare l’attributo all’elemento creato

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


Esempio 1

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.

<script type="text/javascript">
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);
}
</script>

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 e 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:

<script type="text/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);
}
</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.

Questi sono solo alcuni esempi di come creare nuovi attributi con createAttribute() e setAttributeNode().

Alcuni link utili:

Creare elementi nel dom con javascript

Dom in javascript

Come creare una galleria di immagini con javascript

Utilizzare gli array in javascript

Creare una calcolatrice con javascript

Come validare un form con javascript

Utilizzare il Metodo getElementById

Esempi di Javascript corfirm

Esempi con Javascript prompt

Alcuni esempi con Javascript alert

Tutorial javascript

Autore dell'articolo: Cristina

Avatar per Coding Creativo

Lascia un commento

Il tuo indirizzo email non sarà pubblicato. I campi obbligatori sono contrassegnati *