Jak dynamicznie tworzyć nowe divy, zmieniać, przenosić, modyfikować w każdy możliwy sposób w JavaScript?

Chcę tworzyć nowe elementy div podczas ładowania strony. Te elementy DIV będą wyświetlane jako uporządkowana grupa, która zmienia się w zależności od danych zewnętrznych z pliku JSON. Będę musiał to zrobić za pomocą pętli for, ponieważ potrzeba ponad 100 elementów div.

Muszę więc mieć możliwość zmiany każdego utworzonego elementu div pod względem wysokości, szerokości, góry / lewej i tak dalej. Jednak document.getElementById("created_div").style.whatevernic nie robi, nie widzę nawet żadnego nowego elementu div. Ustawiłem wysokość / szerokość nowych elementów div na 500px, tło na „czerwone” i tak dalej, ale na pewno nie pojawiają się żadne nowe elementy div.

Co ja robię źle?

• kreacja var div = document.createElement('div');
• Dodanie document.body.appendChild(div);
• Manipulacja stylami
  • Pozycjonowanie div.style.left = '32px'; div.style.top = '-16px';
  • Zajęcia div.className = 'ui-modal';
• Modyfikacja
  • ID div.id = 'test';
  • zawartość (za pomocą HTML) div.innerHTML = '<span class="msg">Hello world.</span>';
  • zawartość (za pomocą tekstu) div.textContent = 'Hello world.';
• Usuwanie div.parentNode.removeChild(div);
• Dostęp
  • według ID div = document.getElementById('test');
  • według tagów array = document.getElementsByTagName('div');
  • według klasy array = document.getElementsByClassName('ui-modal');
  • przez selektor CSS (pojedynczy) div = document.querySelector('div #test .ui-modal');
  • przez selektor CSS (wiele) array = document.querySelectorAll('div');
• Relacje (w tym węzły tekstowe)
  • dzieci node = div.childNodes[i];
  • rodzeństwo node = div.nextSibling;
• Relacje (tylko elementy HTML)
  • dzieci element = div.children[i];
  • rodzeństwo element = div.nextElementSibling;

To obejmuje podstawy manipulacji DOM. Pamiętaj, że dodanie elementu do treści lub węzła zawartego w treści jest wymagane, aby nowo utworzony węzeł był widoczny w dokumencie.

Czy próbowałeś już JQuery ? Waniliowy javascript może być trudny. Spróbuj użyć tego:

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

.container-elementjest selektorem JQuery, który oznacza element klasą „element-kontenera” (prawdopodobnie element nadrzędny, do którego chcesz wstawić swoje elementy div). Następnie add()funkcja wstawia HTML do elementu kontenera.