Curso de Javascript | 36. Create element

Curso de Javascript | Create element

2.  
14.  
19.  
21.  
22.  
25.  
26.  
28.  
34.  

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. 🚀

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