Создание динамического контента с помощью append jQuery

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

Пример использования метода append():

HTML-код:

  
Первый абзац.
  
Второй абзац.

JavaScript-код с использованием JQuery:

$(function() {
  $('#myDiv').append('
Третий абзац.
');
});

Этот код выбирает элемент с id "myDiv" и добавляет новый элемент - третий абзац - в его конец. Результат будет выглядеть следующим образом:

  
Первый абзац.
  
Второй абзац.
  
Третий абзац.

Также метод append() может использоваться для добавления нового html-кода:

JavaScript-код:

$(function() {
  $('#myDiv').append('
Один
Два
Три
');
});

Результат будет выглядеть следующим образом:

  
Первый абзац.
  
Второй абзац.
  
Третий абзац.
  

    
Один
    
Два
    
Три
  

Также метод append() может принимать функцию в качестве аргумента, которая будет вызываться для каждого выбранного элемента:

JavaScript-код:

$(function() {
  $('#myDiv p').append(function(index) {
    return '(Абзац ' + (index+1) + ')';
  });
});

Результат будет выглядеть следующим образом:

  
Первый абзац (Абзац 1).
  
Второй абзац (Абзац 2).
  
Третий абзац (Абзац 3).
  

    
Один
    
Два
    
Три
  

Таким образом, метод append() является очень полезным для добавления нового содержимого на веб-страницу с помощью JQuery.