¿Cómo crear un nuevo div de forma dinámica, cambiarlo, moverlo, modificarlo de todas las formas posibles, en JavaScript?

Quiero crear nuevos divs a medida que se carga la página. Estos divs aparecerán como un grupo ordenado que cambia según los datos externos de un archivo JSON. Necesitaré hacer esto con un ciclo for porque se necesitan más de 100 divs.

Por lo tanto, necesito poder cambiar cada div creado con respecto a la altura, el ancho, la parte superior / izquierda, etc. Sin embargo, document.getElementById("created_div").style.whateverno hace nada, ni siquiera puedo ver aparecer un solo div nuevo. Establecí la nueva altura / ancho de divs en 500px, el fondo en "rojo", y así sucesivamente, pero definitivamente no aparecen nuevos divs.

¿Qué estoy haciendo mal?

• Creación var div = document.createElement('div');
• Adición document.body.appendChild(div);
• Manipulación de estilo
  • Posicionamiento div.style.left = '32px'; div.style.top = '-16px';
  • Clases div.className = 'ui-modal';
• Modificación
  • CARNÉ DE IDENTIDAD div.id = 'test';
  • contenido (usando HTML) div.innerHTML = '<span class="msg">Hello world.</span>';
  • contenido (usando texto) div.textContent = 'Hello world.';
• Eliminación div.parentNode.removeChild(div);
• Accediendo
  • por ID div = document.getElementById('test');
  • por etiquetas array = document.getElementsByTagName('div');
  • por clase array = document.getElementsByClassName('ui-modal');
  • por selector CSS (sencillo) div = document.querySelector('div #test .ui-modal');
  • por selector CSS (multi) array = document.querySelectorAll('div');
• Relaciones (nodos de texto incluidos)
  • niños node = div.childNodes[i];
  • hermano node = div.nextSibling;
• Relaciones (solo elementos HTML)
  • niños element = div.children[i];
  • hermano element = div.nextElementSibling;

Esto cubre los conceptos básicos de la manipulación DOM. Recuerde, se requiere la adición de elementos al cuerpo o un nodo contenido en el cuerpo para que el nodo recién creado sea visible dentro del documento.

¿Has probado JQuery ? JavaScript de vainilla puede ser difícil. Intente usar esto:

$('.container-element').add('<div>Insert Div Content</div>');

.container-elementes un selector de JQuery que marca el elemento con la clase "contenedor-elemento" (presumiblemente el elemento padre en el que desea insertar sus divs). Luego, la add()función inserta HTML en el elemento contenedor.