jQuery: добавление и удаление элементов DOM онлайн урок.


jQuery предоставляет удобные средства для добавления и удаления элементов из объектной модели документа. Для этого используются методы:
  • prepend() - добавляет в выбранные элементы дочерний перед первым дочерним
  • append() - добавляет в выбранные элементы дочерний после последнего дочернего
  • before() - добавляет элемент после выбранных элементов
  • after() - добавляет элемент перед выбранными элементами
  • remove() - удаляет выбранные элементы из DOM вместе с потомками
  • empty() - удаляет всех потомков выбранных элементов
Рассмотрим примеры для каждого метода.



В результате выполнения скрипта будут следующие изменения:
  1. Добавится новый элемент списка, он будет первым
  2. Добавится текст внутри тега b в конец блока #bar
  3. После тега h1 добавится текст Here is some list:
  4. Перед элементом div#bar добавится текст I am before #bar

Рассмотрим методы удаления элементов на примере списка из нашего примера:

$('.foo').empty();


В этом случае будут удалены все элементы li списка ul.foo.

$('.foo').remove();


В этом случае будет удален сам элемент ul.foo и элементы списка li. Также, например, если выполнить инструкцию

$('body').empty();


то будет очищено все содержимое тега body и страница станет пустой.