Append JS: добавляем элементы на страницу с помощью JavaScript

В JavaScript метод append используется для добавления элементов в конец родительского элемента. Этот метод часто применяется для добавления новых элементов на страницу, например, для добавления контента, форм, изображений и других элементов.

Для использования метода append необходимо предварительно получить ссылку на родительский элемент, к которому будет добавлен новый элемент. Для этого можно использовать функцию document.querySelector или document.getElementById, чтобы найти элемент на странице по его идентификатору или CSS селектору.

Например, следующий код добавляет новый параграф в конец родительского элемента с идентификатором "myDiv":

javascript
var div = document.getElementById("myDiv"); // получить ссылку на родительский div элемент
var p = document.createElement("p"); // создать новый элемент p
p.textContent = "Новый параграф"; // установить текст для созданного элемента
div.append(p); // добавить элемент p в конец div

В результате выполнения этого кода будет добавлен новый параграф с текстом "Новый параграф" в конец элемента с идентификатором "myDiv".

Метод append может принимать несколько аргументов, что позволяет добавлять сразу несколько элементов в конец родительского элемента. Например:

javascript
var div = document.getElementById("myDiv");
var p1 = document.createElement("p");
p1.textContent = "Первый параграф";
var p2 = document.createElement("p");
p2.textContent = "Второй параграф";
div.append(p1, p2); // добавить элементы p1 и p2 в конец div

В этом примере будет создано и добавлено в конец элемента с идентификатором "myDiv" два параграфа с текстом "Первый параграф" и "Второй параграф".

Также метод append может принимать не только HTML элементы, но и строки или другие типы данных. Например:

javascript
var div = document.getElementById("myDiv");
div.append("Текстовая строка", 1234); // добавить текст и число в конец div

В этом примере будет добавлены в конец элемента с идентификатором "myDiv" текстовая строка "Текстовая строка" и число 1234.

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