Как динамически создать новый div, изменить его, переместить, изменить любым возможным способом в JavaScript?

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

Итак, мне нужно иметь возможность изменять каждый созданный div с точки зрения высоты, ширины, верха/левого угла и так далее. Тем не менее, document.getElementById("created_div").style.whatever чем бы то ни было, я даже не вижу появления ни одного нового div. Я установил новые divs height/width на 500px, background на "red" и так далее, но никаких новых div'ов определенно не появляется.

Что я делаю неправильно?

Ответ 1

Это охватывает основы манипуляции DOM. Помните, что добавление элемента в тело или содержащий тело node требуется, чтобы вновь созданный node был видимым внутри документа.

Ответ 2

Вы пробовали JQuery? Ванильный javascript может быть жестким. Попробуйте использовать это:

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

.container-element - это селектор JQuery, который маркирует элемент с классом "контейнер-элемент" (предположительно родительский элемент, в который вы хотите вставить свои div). Затем функция add() вставляет HTML в контейнер-элемент.

Ответ 3

в вышеупомянутом div.classNmae = 'col-md-6'; не работает. я уже добавил