Условие
В отсеке NodeBay есть площадка, трюм, барабаны и рельс с чипами. В script.js создайте узлы, вставьте, удалите и замените их. HTML и CSS не трогайте. Сверьте с вкладкой «Результат».
Что нужно сделать
createElement("div")→ классcrate, текст Груз OK →appendв#hold.createElement("span")→ классtag, текст NEW →prependв.rail.- Удалить второй
.drum(индекс 1) черезremove(). - Первое
.chipзаменить на ящик черезreplaceWith(ящик уйдёт из#hold). - Перед
#pad:insertAdjacentHTML("beforebegin", …)с<h2 class="alert">Внимание</h2>. #pad.textContent = "Готово"(безопасно, без HTML).
Подсказка для новичка
createElement создаёт узел только в памяти - на странице его не будет, пока не сделаете append / prepend / before. replaceWith перемещает уже существующий узел: один и тот же ящик нельзя «скопировать» в два места сразу.
Стартовый код
Пишите только в script.js. «Помощник» подставит решение по шагам.
Вот так должно получиться
На превью после скрипта должно быть так:
Как пользоваться IDE
- Предпросмотр — как выглядит ваша страница.
- Результат — какой итог должен получиться.
- Описание задачи — полное условие и справка.
- Задание — краткие шаги 1–2–3 снизу.
- Помощник — подсказки по шагам.
- Черновик — ссылка на ваш код.
- Сброс кода — стартовый шаблон.
Вставка
append - в конец родителя, prepend - в начало. Есть ещё before / after относительно соседа.
textContent vs innerHTML
Для обычного текста берите textContent - теги не исполняются. innerHTML и insertAdjacentHTML вставляют разметку; с данными от пользователя это опасно (XSS).
Порядок шагов
Сначала append в hold, потом prepend метки, потом remove, потом replaceWith - так ящик окажется на рельсе, а hold опустеет.
Коротко: create · append · prepend · remove · replaceWith · adjacentHTML · textContent.