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?

javascript dom

— Erik Nelson
quelle

Teilen Sie den Code, den Sie zum Erstellen von Divs verwenden

— Wakooka

$ ("# box0"). append ('<div id = "created_div"> </ div>');

— Erik Nelson

Wenn Sie dies in einer Schleife tun, bedeutet dies, dass Sie versuchen, 100 Divs mit derselben Kennung zu erstellen?

— Evan Trimboli

in der Browserkonsole suchen ... irgendwelche Fehler? Auch wenn die ID nicht wiederholt werden sollte ... sollte das Einfügen nicht gestoppt werden, wenn ein Selektor vorhanden ist und keine Fehler ausgegeben werden. Spiegel sind die erste kritische Prüfung

— charlietfl

Fügen Sie sie neben dem Erstellen in das DOM ein?

— Gabriele Petrioli

Antworten:

420

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.

— Ryan Stein
quelle

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.

— Brad Ross
quelle

Nun, ich habe es verstanden. Ich musste die Polsterung auf größer als 0 einstellen. Obwohl die Höhe und Breite jeweils auf 64 eingestellt sind. Bleh. Gibt es eine Möglichkeit für ein Kinder-Div, sich wie ein normales Div zu verhalten? Das Ziel ist es, jedes Div dazu zu bringen, sich wie ein Link zu verhalten. Der Versuch, eine dynamische Liste für eine Spielwebsite zu erstellen; /

— Erik Nelson

Ich bin damit nicht einverstanden, innerHTML (was jquery dafür verwendet) ist KEIN Standard, und der Preis, den Standard nicht zu befolgen, kann zu Fehlverhalten führen. Außerdem macht es für mich keinen Sinn, eine Plan-HTML-Zeichenfolge in einen DOM-Baum einzufügen, anstatt Knotenelemente hinzuzufügen.

— StormByte

Wenn man bedenkt, dass der gesamte DOM-Baum als einfaches altes HTML beginnt und dass innerHTML genau das ist - das HTML, das ein Element enthält und mit dem ein Problem vorliegt, entspricht der Aussage, dass Sie das DOM nicht verwenden sollten, weil es verschmutzt ist das einfache alte HTML.

— Rodney P. Barbati