Добавление элементов на страницу с помощью JavaScript и метода append()

Метод append() в JavaScript

Метод append() в JavaScript используется для добавления одного или нескольких элементов в конец родительского элемента. Это позволяет динамически создавать и добавлять новые элементы на веб-страницу.

Синтаксис метода append():

• parentElement - родительский элемент
• element1, element2, и т.д. - элементы, которые вы хотите добавить

Пример 1: Добавление текстового элемента

const parentDiv = document.querySelector('#parent');
const textElement = document.createTextNode('Привет, мир!');
parentDiv.append(textElement);

В этом примере мы создаем родительский элемент с идентификатором "parent" и создаем текстовый узел с текстом "Привет, мир!". Затем мы добавляем этот текстовый узел в конец родительского элемента с помощью метода append().

Пример 2: Добавление HTML-элемента

const parentDiv = document.querySelector('#parent');
const newElement = document.createElement('p');
newElement.textContent = 'Это новый параграф!';
parentDiv.append(newElement);

В этом примере мы создаем новый абзац (<p>) и устанавливаем ему текстовое содержимое "Это новый параграф!". Затем мы добавляем этот элемент в конец родительского элемента с помощью метода append().

Пример 3: Добавление нескольких элементов

const parentDiv = document.querySelector('#parent');
const element1 = document.createElement('h1');
element1.textContent = 'Заголовок';
const element2 = document.createElement('p');
element2.textContent = 'Абзац';
parentDiv.append(element1, element2);

В этом примере мы создаем заголовок (<h1>) с текстом "Заголовок" и абзац (<p>) с текстом "Абзац". Затем мы добавляем оба элемента в конец родительского элемента, указывая их в методе append() через запятую.

Один и тот же родительский элемент может содержать несколько дочерних элементов, добавленных с помощью метода append(). Вы также можете добавлять как текстовые узлы, так и HTML-элементы по своему усмотрению.

Это был небольшой обзор метода append() в JavaScript, его синтаксиса и примеров использования. Надеюсь, это помогло вам лучше понять, как добавлять элементы на веб-страницу с помощью данного метода. Если у вас возникли дополнительные вопросы, не стесняйтесь спрашивать.