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

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

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

Ответы

Ответ 1

Создание var div = document.createElement('div');
Добавление document.body.appendChild(div);
Управление стилями
- Позиционирование div.style.left = '32px'; div.style.top = '-16px';
- Классы div.className = 'ui-modal';
Модификация
- ID 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 (multi) array = document.querySelectorAll('div');
Отношения (включая текстовые узлы)
- дети node = div.childNodes[i];
- sibling node = div.nextSibling;
Отношения (только HTML-элементы)
- children element = div.children[i];
- sibling element = div.nextElementSibling;

Это охватывает основы манипуляции 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'; не работает. я уже добавил