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

Метод replaceWith

Метод replaceWith замещает внутренне содержимое элемента новым содержимым. Он имеет следующие варианты использования:

• replaceWith('разметка html'): замена содержимого элемента разметкой html

• replaceWith(элемент): замена содержимого элемента некоторым элементом html

• replaceWith(jQuery): замена содержимого элемента объектом jQuery

• replaceWith(функция): замена содержимого элемента объектом, возвращаемым функцией

Например, заменим первый элемент списка новым содержимым:

$('li.lang').first().replaceWith('<li class="lang">JavaScript</li>');

Применим функцию для замены содержимого. Допустим, у нас есть следующая разметка:

<div id="list">
	<div class="lang">Java</div>
	<div class="lang">C/C++</div>
	<div class="lang">PHP</div>
</div>

Но мы например захотели преобразовать этот элемент div в список. Тогда мы можем написать так:

$('div.lang').replaceWith(function() {
		return '<li class="lang">'+$(this).text()+"</li>";
});
$('div#list').replaceWith(function() {
		return '<ol>'+$(this).html()+"</ol>";
});

Функция проходит по всем элементам выборки. Перебираемый элемент мы можем получить с помощью ключевого слова this. Затем заменяем элементы внутри div на элементы списка. На выходе у нас получится следующая разметка:

<ol>
	<li class="lang">Java</li>
	<li class="lang">C/C++</li>
	<li class="lang">PHP</li>
</ol>

Метод replaceAll

Метод replaceAll(замещаемый_элемент) замещает все элементы, определенные в параметре, новым элементом. В качестве замещаемого элемента можем передавать селектор, элемент html или объект jQuery. Например, заменим все элементы предыдущего списка другим содержимым:

$('<li class="lang">Элемент списка</li>').replaceAll('li.lang');

В результате получится следующая разметка:

<ol>
	<li class="lang">Элемент списка</li>
	<li class="lang">Элемент списка</li>
	<li class="lang">Элемент списка</li>
</ol>