Как динамически создавать новый div, изменять его, перемещать, всячески модифицировать в JavaScript?

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

Итак, мне нужно иметь возможность изменять каждый созданный div по высоте, ширине, верхнему / левому и так далее. Тем document.getElementById("created_div").style.whateverне менее, ничего не делает, я даже не вижу ни одного нового div. Я установил новую высоту / ширину div на 500 пикселей, фон на «красный» и так далее, но никаких новых 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);
• Доступ
  • по ID 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, который помечает элемент классом «контейнер-элемент» (предположительно родительский элемент, в который вы хотите вставить свои div). Затем add()функция вставляет HTML в элемент-контейнер.