Як динамічно створювати новий div, змінювати його, переміщувати, модифікувати всіляко в JavaScript?

Я хочу створювати нові div під час завантаження сторінки. Ці divs відображатимуться як упорядкована група, яка змінюється залежно від зовнішніх даних із файлу JSON. Мені потрібно буде зробити це за допомогою циклу for, оскільки потрібно понад 100 div.

Отже, мені потрібно мати можливість змінювати кожен створений div щодо висоти, ширини, верхнього / лівого і так далі. Тим document.getElementById("created_div").style.whateverне менше, нічого не робить, я навіть не бачу, щоб з'явився жоден новий div. Я встановив для висоти / ширини нових div значення 500px, фон - "червоний" тощо, але жодних нових divів точно не з'являється.

Що я роблю не так?

• Створення var div = document.createElement('div');
• Додавання document.body.appendChild(div);
• Маніпуляція зі стилем
  • Позиціонування div.style.left = '32px'; div.style.top = '-16px';
  • Заняття div.className = 'ui-modal';
• Модифікація
  • Посвідчення особи div.id = 'test';
  • вміст (із використанням HTML) div.innerHTML = '<span class="msg">Hello world.</span>';
  • вміст (з використанням тексту) div.textContent = 'Hello world.';
• Видалення div.parentNode.removeChild(div);
• Доступ
  • за посвідченням особи div = document.getElementById('test');
  • за тегами array = document.getElementsByTagName('div');
  • за класом array = document.getElementsByClassName('ui-modal');
  • за допомогою селектора CSS (одиночний) div = document.querySelector('div #test .ui-modal');
  • за допомогою селектора CSS (мульти) array = document.querySelectorAll('div');
• Відносини (текстові вузли включені)
  • діти node = div.childNodes[i];
  • брат або сестра node = div.nextSibling;
• Відносини (лише елементи HTML)
  • діти element = div.children[i];
  • брат або сестра element = div.nextElementSibling;

Це охоплює основи маніпуляцій DOM. Пам’ятайте, що додавання елемента до тіла або вузла, що міститься в тілі, потрібно, щоб новостворений вузол був видимим у документі.

Ви пробували JQuery ? Ванільний javascript може бути жорстким. Спробуйте скористатися цим:

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

.container-elementє селектором JQuery, який позначає елемент класом "container-element" (імовірно батьківським елементом, в який ви хочете вставити свої div). Потім add()функція вставляє HTML в елемент-контейнер.