Добавление элемента div в body без удаления содержимого

Быстрый ответ

Для того чтобы на страницу был добавлен новый элемент div с помощью JavaScript, вам необходимо выполнить следующие действия:

let newDiv = document.createElement("div"); // Создание нового элемента <div>
document.body.appendChild(newDiv); // Добавление элемента <div> в тело документа

До того, как разместить div на страницу, можно произвести его настройку, задав различные свойства – например, текстовое содержимое или уникальный идентификатор:

newDiv.id = "myDiv"; // Присвоение ID
newDiv.textContent = "Привет, StackOverflow!"; // Добавление текста

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

Визуализация

Предположим, вы добавляете новый блок в городской пейзаж:

let newDiv = document.createElement('div'); // 🏗️ – Оформляем заказ на новое здание
document.body.appendChild(newDiv); // 🌇 – И оно появляется в нашем городском пейзаже

Как выглядел городской пейзаж до и после:

До: 🏢🏦🏛️🏬
После: 🏢🏦🏛️🏬🏗️

Городской вид обновился, и новый div гармонично вписался!

Завершение

Перед тем, как запускать в "полёт" ваши динамически созданные элементы, не забудьте провести тестирование:

• Осуществите проверку кроссбраузерности – удостоверьтесь в корректности отображения вашего контента во всех браузерах.
• Обеспечьте соответствие требованиям доступности – это важно для обеспечения доступа к вашему контенту для всех пользователей.
• Оптимизируйте показатели производительности – высокая скорость является вашим лучшим союзником!

Полезные материалы

1. document.createElement() – Создание элементов с использованием JavaScript — Руководство по созданию элементов на MDN.
2. node.appendChild() – Добавление узлов в DOM — Инструкция по встраиванию узлов в структуру документа.
3. element.innerHTML – Работа с динамическим контентом — Ваш гид в мир динамичных изменений страницы.
4. DOM Manipulation – Нам больше не требуется jQuery! — Переходим к использованию современного Web API, отказываясь от jQuery.
5. Понимание DOM — Модель объектов документа — Проникновение в глубины DOM. Выберете красную таблетку или синюю?