Conceptos de DHTML

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 lang="es">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Prueba</title>
</head>

<body>
    <input type="button" value="Crear nodo tipo elemento y definir el atributo href" onClick="crearElementoyAtributo()">
    <div id="direccion">
    </div>
    <script src="funciones.js"></script>
</body>

</html>

funciones.js:

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

Como funciona:
Creamos un nodo de tipo elemento:

    let elemento = document.createElement('a')

Obtenemos una referencia al div llamado direccion:

    let puntero = document.getElementById('direccion')

Añadimos el nodo de tipo elemento al div:

    puntero.appendChild(elemento)

Creamos un nodo de texto:

    let 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', 'https://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.

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

Retornar