Curso de Javascript | 36. Create element

Por 9.99€ al mes tendrás acceso completo a todos los cursos. Sin matrícula ni permanencia.

const div_rojo = document.createElement('div');
div_rojo.setAttribute('id', 'div_rojo_id');
div_rojo.setAttribute('style', 'background:red; width:300px; height:300px');
div_rojo.classList.add('amor');
div_rojo.innerHTML = 'Contenido';
document.querySelector('#div_rojo_wrapper').appendChild(div_rojo);

Explicación del código:

1. Se crea un div con document.createElement('div').
2. Se le asigna un id con setAttribute().
3. Se agregan estilos directamente con setAttribute('style', 'background:red; width:300px; height:300px').
4. Se le añade una clase con classList.add().
5. Se le inserta contenido con innerHTML.
6. Finalmente, se añade al contenedor #div_rojo_wrapper con appendChild().

Si quisieramos añadir el div_rojo a continuación de un elemento en lugar de dentro, podríamos usar el siguiente código:

document.querySelector("p").insertAdjacentElement("afterend", div_rojo);

Este método posiciona el nuevo div justo después del párrafo seleccionado. 🚀