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

Establece el valor de un atributo en el elemento indicado. Si el atributo ya existe, el valor es actualizado, en caso contrario, el nuevo atributo es añadido con el nombre y valor indicado. Para obtener el valor actual de un atributo, se utiliza getAttribute(); para eliminar un atributo, se llama a removeAttribute().

El método setAttribute() agrega el atributo especificado a un elemento y le da el valor especificado. Si el atributo especificado ya existe, solo se establece / cambia el valor.

Nota: Aunque es posible agregar el atributo de estilo con un valor a un elemento con este método, se recomienda que utilice las propiedades del objeto de estilo en su lugar para el estilo en línea, ya que esto no sobrescribirá otras propiedades de CSS que se pueden especificar en el atributo de estilo.

Sintaxis

Element.setAttribute(name, value);

Parámetros

name Una cadena indicando el nombre del atributo cuyo valor se va a cambiar. El nombre del atributo se convierte automáticamente en minúsculas cuando setAttribute() se llama sobre un elemento HTML en un documento HTML.
value Una cadena que contenga el valor que asignar al atributo. Cualquier valor indicado que no sea una cadena de texto se convierte automáticamente en una cadena de texto. Los atributos booleanos se consideran true si al menos están presentes en el elemento, independientemente de su value actual; como regla, se debería especificar una cadena de texto vacía ("") en value (algunas personas utilizan el nombre del atributo; esto funciona pero no es un standard). Vea un ejemplo posterior para una demostración práctica.

Dado que value se convierte en una cadena de texto, indicando null no necesariamente hace lo que se espera. En lugar de eliminar el atributo o establecer su valor para ser null, establece el valor del atributo a la cadena de texto "null". Si se desea eliminar un atributo, se debe llamar a removeAttribute().

<!DOCTYPE html>
<html>
<head>
<style>
.democlass {
  color: red;
}
</style>
</head>
<body>
<h1>Hola Mundo</h1>
<p>Haga click en el botón para agregar un atributo de clase con el valor de "democlass" al elemento h1.</p>
<button onclick="myFunction()">Probar</button>
<script>
function myFunction() {
  document.getElementsByTagName("H1")[0].setAttribute("class", "democlass"); 
}
</script>
</body>
</html>

Ver ejemplo anterior

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:

<!DOCTYPE html>
<html>
<head>
<title>Problema</title>
<script>
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');
}
</script>
</head>
<body>
<input type="button" value="Crear nodo tipo elemento y definir el atributo href" onClick="crearElementoyAtributo()">
<div id="direccion">
</div>
</body>
</html>

Ver ejemplo anterior

El código javascript :

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.

(adsbygoogle = window.adsbygoogle || []).push({});

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