Generar HTML – Brigzen's

A continuación para ahorrarme tiempo voy a tomar notas solo de nuevos métodos que el profesor me indique.

.create.Element()

Solo hay que pasarle la etiqueta de lo que se quiere crear:

const nuevoEncabezado = document.createElement('h1');

Cuando se crea un elemento que va a ser usado en un bucle sea if o forEach, ese elemento debe ser creado dentro del bucle, de lo contrario el contenido o valor de ese elemento va a ser el último que asignó el bucle.

.appendChild()

Esto le mete un hijo al elemento seleccionado, el nuevo hijo puede ser lo que se ha creado con .createElement(). Este método mete el hijo de último.

.insertBefore(elemento, nodoDeReferencia)

Con este método sí podemos meter el hijo en la posición que queramos, para ello este método pide dos argumentos, el primero es el elemento que se va a insertar, el segundo es el elemento hijo que se va a usar de referencia para insertar este nuevo elemento antes.

Para ello igual hay que tener a mano ese elemento hijo, si es posible en una variable al igual como se hizo anteriormente con el método .remove().

navegacion.insertBefore( enlace, navegación.children[1]; );

.setAttribute(nombre, valor)

Con este método se podría meter a un enlace por ejemplo algún atributo personalizado q se desee. Por ejemplo:

enlace.setAttribute('media", "all" );

El mismo método coloca el signo de igual y las comillas para el valor en el html.

.onClick

Esto creo que es más un atributo de esos que se ven con Firefox Developer que un método. Pero lo anoté porque me parece interesante. Hace que un enlace, por ejemplo, pueda disparar una función cuando se le hace click. Que a todas estas para eso creo que está el detector de eventos.

enlace.onClick = myFuncion;

This.

This es una forma de acceder a las mismas propiedades de los objetos con los métodos. Pero en una función hace referencia a lo que hizo llamar a la función.

En el ejemplo de abajo this. es la variable btnFlotante que es lo que hizo llamar a esa función.

const btnFlotante = document.querySelector('.btn-flotante');

const footer = document.querySelector('.footer');

btnFlotante.addEventListener('click', mostrarOcultarFooter);

function mostrarOcultarFooter() {
    if( footer.classList.contains('activo') ) {
        footer.classList.remove('activo');
        this.classList.remove('activo');
        this.textContent = 'Idioma y Moneda';
    } else {
        footer.classList.add('activo');
        this.classList.add('activo');
        this.textContent = 'X Cerrar';
    }
}