Curso de Javascript | Create element 1

Curso de Javascript
Create element

Curso de Javascript | Create element 2

Curso de Javascript | Create element

1.  
2.  
3.  
4.  
5.  
6.  
7.  
8.  
9.  
10.  
11.  
12.  
13.  
14.  
15.  
16.  
17.  
18.  
19.  
20.  
21.  
22.  
23.  
24.  
25.  
26.  
27.  
28.  
29.  
30.  
31.  
32.  
33.  
34.  
35.  
36.  
37.  
38.  
39.  
40.  
41.  
42.  
43.  
44.  
45.  
46.  
47.  
48.  
49.   
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. 🚀