Wie erstelle ich ein neues Div dynamisch, ändere es, verschiebe es, ändere es auf jede mögliche Weise in JavaScript?

Ich möchte neue Divs erstellen, während die Seite geladen wird. Diese Divs werden als geordnete Gruppe angezeigt, die sich abhängig von externen Daten aus einer JSON-Datei ändert. Ich muss dies mit einer for-Schleife tun, da über 100 Divs benötigt werden.

Ich muss also in der Lage sein, jedes erstellte Div in Bezug auf Höhe, Breite, oben / links usw. zu ändern. Aber document.getElementById("created_div").style.whatevertut nichts, ich kann nicht einmal einen einzigen neuen Div sehen. Ich habe die Höhe / Breite der neuen Divs auf 500px, den Hintergrund auf "rot" usw. eingestellt, aber es werden definitiv keine neuen Divs angezeigt.

Was mache ich falsch?

• Schaffung var div = document.createElement('div');
• Zusatz document.body.appendChild(div);
• Stilmanipulation
  • Positionierung div.style.left = '32px'; div.style.top = '-16px';
  • Klassen div.className = 'ui-modal';
• Änderung
  • ICH WÜRDE div.id = 'test';
  • Inhalte (mit HTML) div.innerHTML = '<span class="msg">Hello world.</span>';
  • Inhalt (mit Text) div.textContent = 'Hello world.';
• Entfernung div.parentNode.removeChild(div);
• Zugriff
  • nach ID div = document.getElementById('test');
  • durch Tags array = document.getElementsByTagName('div');
  • nach Klasse array = document.getElementsByClassName('ui-modal');
  • per CSS-Selektor (einzeln) div = document.querySelector('div #test .ui-modal');
  • per CSS-Selektor (Multi) array = document.querySelectorAll('div');
• Beziehungen (Textknoten enthalten)
  • Kinder node = div.childNodes[i];
  • Geschwister node = div.nextSibling;
• Beziehungen (nur HTML-Elemente)
  • Kinder element = div.children[i];
  • Geschwister element = div.nextElementSibling;

Dies behandelt die Grundlagen der DOM-Manipulation. Denken Sie daran, dass das Hinzufügen eines Elements zum Body oder zu einem Body-enthaltenen Knoten erforderlich ist, damit der neu erstellte Knoten im Dokument sichtbar ist.

Haben Sie JQuery ausprobiert ? Vanille-Javascript kann hart sein. Versuchen Sie Folgendes:

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

.container-elementist ein JQuery-Selektor, der das Element mit der Klasse "container-element" markiert (vermutlich das übergeordnete Element, in das Sie Ihre divs einfügen möchten). Dann add()fügt die Funktion HTML in das Containerelement ein.