LOGO JQuery
jQuery API: Manipulation - манипуляции элементами DOM
ПОСЛЕ знакомства с этим разделом документации jQuery Вы сможете с легкостью манипулировать элементами объектной модели документа. Сегодня мы научимся вставлять, обертывать, замещать, копировать и удалять элементы DOM.

HTML:

.html():string

Возвращает html-содержимое выбранного элемента.
Если таких элементов несколько, то значение будет взято у первого.

.html(string):jQuery Object

Заменяет содержимое всех выбранных элементов на string.

.html(jQuery Object | DOM Object):jQuery Object

Перемещает элементы страницы внутрь выбранных элементов (их прежнее содержимое будет при этом удалено).
Можно задать DOM-элементом или объектом jQuery.
$('#mydiv').html($('#hello').clone());
Откройте пример в новом окне и посмотрите исходный код

.html(function(index, value)):jQuery Object

Заменяет содержимое выбранных элементов на возвращенное пользовательской функцией значение.
Функция вызывается отдельно, для каждого из выбранных элементов.
При вызове ей передаются следующие параметры:
index - позиция элемента в наборе,
value - текущее html-содержимое.
// вернет html-содержимое первого элемента с классом topBlock.
$(".topBlock").html();
// изменит содержимое всех элементов с классом topBlock на параграф с текстом "Новье!".
$(".topBlock").html("<p>Новье!</p>");
В этом примере клик мышкой на параграфе конвертирует его HTML-код в текст.
$("p").click(function () {
  var htmlStr = $(this).html();
  $(this).text(htmlStr);
});
Откройте пример в новом окне и посмотрите исходный код

В этом примере мы добавляем некоторый html-код в каждый элемент div.
$("div").html("<span class=\"red\">Здрасссьте <strong>еще раз!</strong></span>");
Откройте пример в новом окне и посмотрите исходный код

TEXT:

.text():string

Возвращает текст содержащийся в выбранном элементе.

.text(string):jQuery Object

Заменяет всё содержимое у выбранных элементов, на текст string.

.text(function(index, value)):jQuery Object

Заменяет всё содержимое у выбранных элементов на возвращенный пользовательской функцией текст.

Если вы попытаетесь с помощью метода text() поместить в элемент другие элементы с помощью html-текста, то jQuery будет экранировать все теги.

Вставка внутрь

.append(content)

Добавляет контент внутрь всех выбранных элементов ПОСЛЕ существующего контента. Эта операция подобна применению appendChild.

В этом примере мы добавляем некий HTML-код в конец всех параграфов.
$("p").append("<strong>ПРЕВЕД!</strong>");
Откройте пример в новом окне и посмотрите исходный код

.appendTo(content)

Добавляет все выбранные элементы в другой набор элементов ПОСЛЕ существующего контента.

Эта операция обратна использованию выражения $(A).append(B), которое добавляет B в A.
Здесь же A будет добавлено в B.
Просто сравните с примером append().
$("span").appendTo("#foo");
Откройте пример в новом окне и посмотрите исходный код

.prepend(content)

Добавляет контент внутрь всех выбранных элементов ДО существующего контента.
Это наилучшее решение, чтобы вставлять элементы в самое начало.

В этом примере мы добавляем некий HTML-код в начало всех параграфов.
$("p").prepend("<strong>ПРЕВЕД </strong>");
Откройте пример в новом окне и посмотрите исходный код

.prependTo(content)

Добавляет все выбранные элементы в другой набор элементов ДО существующего контента.

Эта операция обратна использованию выражения $(A).prepend(B), которое добавляет B в A. Здесь же A будет добавлено в B.
Просто сравните с примером prepend().
$("span").prependTo("#foo");
Откройте пример в новом окне и посмотрите исходный код

Вставка снаружи

.after(content)

Вставляет контент ПОСЛЕ каждого выбранного элемента.

В примере вставляем некоторый HTML-код ПОСЛЕ всех параграфов.
$("p").after("<strong>Hello</strong>");
Откройте пример в новом окне и посмотрите исходный код

.insertAfter(content)

Вставляет все выбранные элементы ПОСЛЕ других, определенных в insertAfter.
Эта операция обратна использованию выражения $(A).after(B), где B вставляется после A.
Здесь же А вставляется после В.
Просто сравните с примером after().
$("p").insertAfter("#foo");
Откройте пример в новом окне и посмотрите исходный код

.before(content)

Вставляет контент ПЕРЕД каждым выбранным элементом.

В примере вставляем некоторый HTML-код ПЕРЕД всеми параграфами.
$("p").before("<strong>Hello</strong>");
Откройте пример в новом окне и посмотрите исходный код

.insertBefore(content)

Вставляет все выбранные элементы ПЕРЕД другими, определенными в insertBefore.
Эта операция обратна использованию выражения $(A).before(B), где B вставляется после A.
Здесь же А вставляется после В.
Просто сравните с примером before().

В этом примере мы вставляем все параграфы ПЕРЕД элементом, который имеет атрибут id "foo". Тоже самое можно было бы сделать, написав: $("#foo").before("p")
$("p").insertBefore("#foo");
Откройте пример в новом окне и посмотрите исходный код

Обертывание:

.wrap(html | DOM element | jQuery element)

Оборачивает каждый элемент набора в элемент-обертку.
Это может быть полезно при инъекции дополнительной структуры в документ, без нарушения оригинального семантического качества документа.

В этом примере оборачиваем новый элемент div вокруг каждого параграфа. В качестве аргумента выступает HTML-код.
$("p").wrap("<div class='myclass'></div>");
Откройте пример в новом окне и посмотрите исходный код
$("p").wrap(document.createElement("div"));
Откройте пример в новом окне и посмотрите исходный код
$("p").wrap($('div').clone());
Откройте пример в новом окне и посмотрите исходный код

.wrapAll(html | DOM element | jQuery element)

Оборачивает все элементы набора в единственный элемент-обертку.
Это может быть полезно при инъекции дополнительной структуры в документ, без нарушения оригинального семантического качества документа.

В этом примере оборачиваем новый элемент div вокруг всех параграфов. В качестве аргумента выступает HTML-код.
$("p").wrapAll("<div class='myclass'></div>");
Откройте пример в новом окне и посмотрите исходный код

.wrapInner(html | DOM element | jQuery element)

Обертывает внутреннее содержимое каждого элемента набора (включая текстовые узлы) в HTML структуру.
Это может быть полезно при инъекции дополнительной структуры в документ, без нарушения оригинального семантического качества документа.

В этом примере мы выбираем все параграфы и оборачиваем в тэг b их внутреннее содержимое. В качестве аргумента выступает HTML-код.
$("p").wrapInner("<b></b>");
Откройте пример в новом окне и посмотрите исходный код

Замещение:

.replaceWith(content)

Замещает все элементы набора HTML или DOM элементами.

В этом примере по клику на кнопке она замещается элементом div с таким же текстом, какой был на кнопке.
$("button").click(function () {
$(this).replaceWith("<div>" + $(this).text() + "</div>");
});
Откройте пример в новом окне и посмотрите исходный код

.replaceAll(selector)

Замещает все элементы, определенные в селекторе, указанным(и) элементами.
Эта функция дополняет replaceWith(), которая решает ту же задачу, только наоборот.

В этом примере мы замещаем все параграфы текстом, заключенным в тэги b.
$("<b>Параграф. </b>").replaceAll("p");
Откройте пример в новом окне и посмотрите исходный код

Удаление:

.empty()

Удаляет все узлы-потомки (включая текстовые узлы) из набора элементов.
Также удаляет все обработчики событий и внутренние кэшированные данные.

В этом примере по клику на кнопке удаляем все узлы-потомки из всех параграфов.
$("button:eq(1)").click(function () {
    $("p").empty();
});
Откройте пример в новом окне и посмотрите исходный код

.remove(expr)

Удаляет все выбранные элементы из DOM.
Однако при этом они не будут удалены из объекта jQuery, что позволяет использовать их в будущем.

Опционально может быть использовано фильтрующее выражение expr.

В этом примере по клику на кнопке мы удаляем все параграфы из DOM.
$("button:eq(1)").click(function () {
  $("p").remove();
});
Откройте пример в новом окне и посмотрите исходный код

.unwrap()

Удаляет родительские элементы у выбранных элементов, при этом, их содержимое останется на своих местах.
// удалит родительские элементы у всех div-элементов с классом content.
$("div.content").unwrap();
Рассмотрим страницу, содержащую следующий текст:
<div class="new">
   <ul class="list l1">
     <li class="item"> Высоко </li>	
     <li class="item"> Быстро </li>	
     <li class="item"> Сильно </li>	
   </ul>
 </div>
 <div class="new">
   <ul class="list l2">
     <li class="item"> Выше </li>	
     <li class="item"> Быстрее </li>	
     <li class="item"> Сильнее </li>	
   </ul>
 </div>
после применения функции
$("ul").unwrap();
страница станет такой:
<ul class="list l1">
   <li class="item"> Высоко </li>	
   <li class="item"> Быстро </li>	
   <li class="item"> Сильно </li>	
 </ul>
 <ul class="list l2">
   <li class="item"> Выше </li>	
   <li class="item"> Быстрее </li>	
   <li class="item"> Сильнее </li>	
 </ul>

Клонирование:

.clone([withDataAndEvents]):jQuery object

Метод создает копии выбранных элементов страницы и возвращает их в виде объекта jQuery.
Элементы копируются вместе со всеми содержащимися внутри них элементами (так называемое глубокое копирование).

withDataAndEvents - определяет, необходимо ли копировать данные и обработчики событий, установленные на копируемых элементах. По умолчанию, этот параметр равен false.

В этом примере мы клонируем все элементы b (и выбираем клонированные) и вставляем их перед параграфами.
$("b").clone().prependTo("p");
Откройте пример в новом окне и посмотрите исходный код

В этом примере мы создаем кнопку, которая может клонировать сама себя и иметь клонов, также способных себя же клонировать. Гм, попробуйте лучше понажимать эту кнопку...
$("button").click(function(){
  $(this).clone(true).insertAfter(this);
});
Откройте пример в новом окне и посмотрите исходный код

Другие методы

.add(selector)

Добавляет заданные элементы в уже существующий набор элементов.

Добавляемые элементы ищутся на странице с помощью заданного селектора selector.

.add(elements)

Добавляемые элементы задаются одним или несколькими (массивом) DOM-элементами.

.add(html)

Добавляемые элементы задаются html-текстом.

add(selector, context)

Добавляемые элементы ищутся на странице с помощью заданного селектора selector, внутри области, заданной параметром context.
Область поиска может быть задана DOM-элементом, jQuery-объектом или объектом документа.
$("div")   // найдем все div-элементы
  .css("color", "red")  // установим div'ам красный цвет текста
.add(".lBox")  // добавим в набор элементы с классом lBox
  .fadeTo(0, 0.5); // установим прозрачность в 50% всем div'ам и элементам класса lBox

.contents()

Возвращает все дочерние элементы выбранных элементов, а так же текстовое содержимое.

В отличие от схожего метода .children(), в этом методе, в результат будут включены блоки текста, лежащие непосредственно внутри выбранных элементов.

Например, для страницы, содержащей следующий html-текст
<div class="text">
  Текст в начале
  <p>
    Текст в параграфе
  </p>
  Текст в конце
</div>
эти два метода вернут различный результат:
$(".text").children().each(function(){
  alert($(this).text());
});
// в результате, на экране появится одно сообщение: "Текст в параграфе"
 
$(".text").contents().each(function(){
  alert($(this).text());
});
// в результате, на экране появится три сообщения: "Текст в начале", "Текст в параграфе", "Текст в конце"

.end()

Возвращает предыдущий набор элементов в текущей цепочке методов.

Пример:
$("div")   // найдем все div-элементы
.parent()  // найдем все родительские элементы у div
.end();    // вернемся обратно к набору div-элементов
А вот как это может быть использовано:
$("div")   // найдем все div-элементы
.css("border", "1px solid red") // установим div'ам красные рамки
.parent()  // найдем все родительские элементы у div'ов
.css("heigth", "10px").fadeTo(0, 0.5)  // произведем манипуляции с родительскими элементами
.end()     // вернемся обратно к набору div-элементов
.find(".lBox")   // найдем внутри div'ов элементы с классом lBox
.css("color", "green"); // установим зеленый цвет шрифта элементам класса lBox