16 - Crear un atributo y agregárselo a un nodo de tipo elemento (setAttribute)


Hay muchas marcas HTML que pueden tener definidos atributos. Muchos de estos son casi obligatorios para su funcionamiento. Imaginemos la marca HTML <a> , si no definimos el atributo href con la dirección del sitio poco sentido tendrá incluirla en la página.

Veamos con un ejemplo como proceder a definir un atributo a un nodo de tipo elemento:
pagina.html:

<!DOCTYPE html>
<html>
<head>
<title>Problema</title>
<script src="funciones.js"></script>
<link rel="StyleSheet" href="estilos.css" type="text/css">
</head>
<body>
<input type="button" value="Crear nodo tipo elemento y definir el atributo href" 
onClick="crearElementoyAtributo()">
<div id="direccion">
</div>
</body>
</html>

funciones.js:

function crearElementoyAtributo()
{
  var elemento=document.createElement('a');
  var puntero=document.getElementById('direccion');
  puntero.appendChild(elemento);
  nodotexto=document.createTextNode('google');
  elemento.appendChild(nodotexto);
  elemento.setAttribute('href','http://www.google.com.ar');
}

Como funciona:
Creamos un nodo de tipo elemento:

  elemento=document.createElement('a');
Obtenemos una referencia al div llamado direccion:
  var puntero=document.getElementById('direccion');

Añadimos el nodo de tipo elemento al div:

  puntero.appendChild(elemento);

Creamos un nodo de texto:

  nodotexto=document.createTextNode('google');

Ahora añadimos el nodo de texto al nodo de tipo elemento que acabamos de crear:

  elemento.appendChild(nodotexto);

Por último y lo nuevo, es definir el atributo href al ancla que acabamos de crear:

  elemento.setAttribute('href','http://www.google.com.ar');

El primer parámetro es el nombre de la propiedad (en este caso href) y el segundo es el valor que toma la propiedad.


Retornar