Замена элемента

Для полной замены одного элемента на другой предназначены два метода:

  • replaceWith(<Выражение>) — заменяет все элементы коллекции значением <Выражение>. В качестве параметра может быть указан HTML-код, DOM-элемент, массив DOM-элементов или коллекция элементов jQuery. Метод возвращает объект jQuery с удаленными элементами. Для примера заменим элемент с идентификатором div1 на новый элемент при щелчке на нем:
<div id="div1">Нажмите здесь</div>
$('#div1').click( function() {
   $('#div1').replaceWith('<u>Новый элемент</u>');
});

Теперь заменим DOM-элементом:

$('#div1').replaceWith( $('<u>Новый элемент</u>').get(0) );

А теперь заменим созданным элементом коллекции jQuery:

$('#div1').replaceWith( $('<u>Новый элемент</u>') );

Если указать существующую коллекцию элементов jQuery, то элементы будут перемещены:

<div id="div1">Нажмите здесь</div>
Какой-то текст<br>
<p>Абзац1</p>
<p>Абзац2</p>
$('#div1').click( function() {
   $('#div1').replaceWith( $('p') );
});

В результате все абзацы будут перемещены вместо элемента с идентификатором div1, и мы получим следующий HTML-код:

<p>Абзац1</p><p>Абзац2</p>
Какой-то текст<br>

В качестве параметра можно также указать ссылку на функцию следующего формата:

function <Название функции>() {
   // ...
}

Текущий элемент коллекции доступен внутри функции через указатель this. Обратите внимание: указатель this ссылается на текущий элемент объектной модели документа, а не на элемент коллекции jQuery. Функция должна вернуть новое содержимое. Преобразуем все теги <div> в абзацы, содержащие идентификаторы удаленных элементов:

<div id="div1">Нажмите здесь</div>
<div id="div2"></div>
$('#div1').click( function() {
   $('div').replaceWith( function() {
      return '<p>' + this.id + '</p>';
   });
});

Результат после щелчка на элементе с идентификатором div1:

<p>div1</p>
<p>div2</p>
  • replaceAll(<Параметр>) — вставляет созданный элемент вместо всех элементов, соответствующих указанному параметру. В качестве параметра может быть указан селектор, DOM-элемент, массив DOM-элементов или коллекция элементов jQuery. Заменим элемент с идентификатором div1 на другой элемент:
$('<u>Новый элемент</u>').replaceAll('#div1');

Результат будет таким же, как и при использовании метода replaceWith():

$('#div1').replaceWith('<u>Новый элемент</u>');

Как видно из примера, мы поменяли параметры местами и использовали метод replaceWith() вместо метода replaceAll().

Учебник по jQuery и AJAX
Учебник по jQuery и AJAX в формате PDF

Помощь сайту

ЮMoney (Yandex-деньги): 410011140483022

ПАО Сбербанк:
Счет: 40817810855006152256
Реквизиты банка:
Наименование: СЕВЕРО-ЗАПАДНЫЙ БАНК ПАО СБЕРБАНК
Корреспондентский счет: 30101810500000000653
БИК: 044030653
КПП: 784243001
ОКПО: 09171401
ОКОНХ: 96130
Скриншот реквизитов