Tutorial de DHTML : Temarios

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:
pagina1.html:

<html>
<head>
<title>Problema</title>
<script language="javascript" src="funciones.js" type="text/javascript"></script>
</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()
{
  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.

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