Метод 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(замещаемый_элемент)
замещает все элементы, определенные в параметре, новым элементом.
В качестве замещаемого элемента можем передавать селектор, элемент html или объект jQuery. Например, заменим
все элементы предыдущего списка другим содержимым:
$('<li class="lang">Элемент списка</li>').replaceAll('li.lang');
В результате получится следующая разметка:
<ol> <li class="lang">Элемент списка</li> <li class="lang">Элемент списка</li> <li class="lang">Элемент списка</li> </ol>