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:
- Se crea un
div
condocument.createElement('div')
. - Se le asigna un
id
consetAttribute()
. - Se agregan estilos directamente con
setAttribute('style', 'background:red; width:300px; height:300px')
. - Se le añade una clase con
classList.add()
. - Se le inserta contenido con
innerHTML
. - Finalmente, se añade al contenedor
#div_rojo_wrapper
conappendChild()
.
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. 🚀