Вставка элемента после другого элемента: Тренажер JavaScript: Покоряем HTML DOM

Тренажер по работе с HTML DOM на JavaScript для пользователей с начальным и средним уровнем подготовки.

Вставка элементов после других элементов - это распространенная задача при разработке веб-интерфейсов. Она позволяет динамически обновлять контент страницы, добавлять новые разделы, элементы управления или сообщения пользователю. В этих упражнениях вы познакомитесь с основными методами JavaScript для вставки элементов в DOM дерево после указанного элемента. Вы научитесь создавать новые элементы, задавать им содержимое и свойства, а также правильно размещать их в структуре HTML документа. Каждое задание построено таким образом, чтобы постепенно усложнять процесс и закрепить ваше понимание на практике. Начните с простых задач и постепенно переходите к более сложным, чтобы уверенно освоить этот навык.

Список тем

Вставка простого текста

Добавьте текстовый узел "Привет, мир!" после элемента с id "tt". Используйте методы DOM для создания текстового узла и его вставки.

HTML

Восстановить HTML

                      <div id="tt">Это целевой элемент.</div>

<div id="tt">Это целевой элемент.</div>

JavaScript

const ttElement = document.getElementById("tt");
const newText = document.createTextNode(input__1);
input__2.after(newText);

                     const ttElement = document.getElementById("tt");
const newText = document.createTextNode(input__1);
input__2.after(newText);

Используйте `document.createElement('p')` для создания нового элемента абзаца, затем `textContent` чтобы добавить текст, и `element.after(newElement)` для вставки нового элемента после указанного.

Заполнить ответами все поля

Результат

Лог

Выполнить

Отметить решенным

Показать подсказку

Вставка нового элемента

Создайте новый элемент `<p>` с текстом "Это новый абзац." и вставьте его после элемента с id "container".

HTML

Восстановить HTML

                      <div id="container">Существующий контент</div>

<div id="container">Существующий контент</div>

JavaScript

const container = document.getElementById(input__1);
const newParagraph = document.input__2('p');
newParagraph.textContent = "Это новый абзац.";
container.after(input__3);

                     const container = document.getElementById(input__1);
const newParagraph = document.input__2('p');
newParagraph.textContent = "Это новый абзац.";
container.after(input__3);

Создайте новый элемент `<p>` с помощью `document.createElement('p')`. Задайте тексту нового элемента значение. Найдите элемент с id "container" и вставьте новый элемент после него, используя метод `after()`.

Заполнить ответами все поля

Результат

Лог

Выполнить

Отметить решенным

Показать подсказку

Вставка элемента с классом

Создайте новый элемент `<div>` с классом "highlight" и текстом "Важный блок" и вставьте его после элемента с id "info".

CSS

.highlight {
  background-color: yellow;
}

HTML

Восстановить HTML

                      <div id="info">Информационный блок</div>

<div id="info">Информационный блок</div>

JavaScript

const infoElement = document.getElementById("info");
const newDiv = document.createElement(input__1);
newDiv.classList.add(input__2);
newDiv.input__3 = "Важный блок";
infoElement.after(newDiv);

                     const infoElement = document.getElementById("info");
const newDiv = document.createElement(input__1);
newDiv.classList.add(input__2);
newDiv.input__3 = "Важный блок";
infoElement.after(newDiv);

Создайте `<div>`, добавьте ему класс "highlight" с помощью `classList.add()`, задайте текст и вставьте после элемента с id "info".

Заполнить ответами все поля

Результат

Лог

Выполнить

Отметить решенным

Показать подсказку

Вставка нескольких элементов

Создайте два новых элемента: `<p>` с текстом "Первый абзац" и `<span>` с текстом "Второй элемент". Вставьте их последовательно после элемента с классом "original".

HTML

Восстановить HTML

                      <div class="original">Исходный элемент</div>

<div class="original">Исходный элемент</div>

JavaScript

const originalElement = document.querySelector(input__1);
const firstNewElement = document.createElement('p');
firstNewElement.textContent = "Первый абзац";
const secondNewElement = document.createElement('span');
secondNewElement.textContent = "Второй элемент";
originalElement.after(firstNewElement, input__2);

                     const originalElement = document.querySelector(input__1);
const firstNewElement = document.createElement('p');
firstNewElement.textContent = "Первый абзац";
const secondNewElement = document.createElement('span');
secondNewElement.textContent = "Второй элемент";
originalElement.after(firstNewElement, input__2);

Создайте два элемента. Добавьте текст в каждый из них. Найдите элемент с классом "original" и вставьте новые элементы после него, используя метод `after()` для каждого нового элемента.

Заполнить ответами все поля

Результат

Лог

Выполнить

Отметить решенным

Показать подсказку

Вставка изображения

Вставьте изображение (используйте одну из предложенных картинок) после заголовка `<h2>`.

HTML

Восстановить HTML

                      <h2>Заголовок</h2>

<h2>Заголовок</h2>

JavaScript

const heading = document.querySelector(input__1);
const image = document.createElement('img');
image.src = input__2;
heading.after(input__3);

                     const heading = document.querySelector(input__1);
const image = document.createElement('img');
image.src = input__2;
heading.after(input__3);

Создайте элемент `<img>` с помощью `document.createElement('img')`. Установите атрибут `src` на URL изображения. Найдите заголовок `<h2>` и вставьте изображение после него.

Заполнить ответами все поля

Результат

Лог

Выполнить

Отметить решенным

Показать подсказку

Вставка элемента с атрибутами

Создайте ссылку (`<a>`) с текстом "Перейти на главную" и атрибутом `href` равным "/" и вставьте её после элемента с id "navigation".

HTML

Восстановить HTML

                      <div id="navigation">Навигация</div>

<div id="navigation">Навигация</div>

JavaScript

const navElement = document.getElementById("navigation");
const link = document.createElement(input__1);
link.textContent = "Перейти на главную";
link.setAttribute(input__2, "/");
navElement.after(link);

                     const navElement = document.getElementById("navigation");
const link = document.createElement(input__1);
link.textContent = "Перейти на главную";
link.setAttribute(input__2, "/");
navElement.after(link);

Создайте элемент `<a>`, установите текст, атрибут `href` и вставьте после элемента с id "navigation".

Заполнить ответами все поля

Результат

Лог

Выполнить

Отметить решенным

Показать подсказку

Вставка клонированного элемента

Склонируйте элемент с id "original-item" и вставьте его копию после оригинала.

HTML

Восстановить HTML

                      <div id="original-item">Исходный элемент</div>

<div id="original-item">Исходный элемент</div>

JavaScript

const originalItem = document.getElementById("original-item");
const clonedItem = originalItem.input__1(input__2);
originalItem.after(input__3);

                     const originalItem = document.getElementById("original-item");
const clonedItem = originalItem.input__1(input__2);
originalItem.after(input__3);

Используйте `cloneNode(true)` для глубокого клонирования элемента, затем вставьте копию.

Заполнить ответами все поля

Результат

Лог

Выполнить

Отметить решенным

Показать подсказку

Вставка элемента после последнего дочернего

Вставьте новый абзац с текстом "Последний абзац" после последнего дочернего элемента в `<div>` с id="parent".

HTML

Восстановить HTML

                      <div id="parent">
  <p>Первый абзац</p>
  <p>Второй абзац</p>
</div>

<div id="parent">
  <p>Первый абзац</p>
  <p>Второй абзац</p>
</div>

JavaScript

const parentElement = document.getElementById('parent');
const lastChild = parentElement.input__1;
const newParagraph = document.createElement('p');
newParagraph.textContent = 'Последний абзац';
if (lastChild) {
  lastChild.input__2(newParagraph);
} else {
  parentElement.appendChild(newParagraph); 
}

                     const parentElement = document.getElementById('parent');
const lastChild = parentElement.input__1;
const newParagraph = document.createElement('p');
newParagraph.textContent = 'Последний абзац';
if (lastChild) {
  lastChild.input__2(newParagraph);
} else {
  parentElement.appendChild(newParagraph); 
}

Найдите родительский элемент. Получите его последнего потомка (`lastElementChild`). Вставьте новый абзац после последнего потомка.

Заполнить ответами все поля

Результат

Лог

Выполнить

Отметить решенным

Показать подсказку