replaceWith()

33
посл. ред. 12.08.2016

Метод replaceWith() заменяет каждый элемент выборки указанным содержимым. Метод возвращает jQuery-объект, содержащий элементы, удалённые из DOM-дерева.

Варианты использования

jQ_object.replaceWith(HTML-код) => jQuery
Удаляет из DOM-дерева все элементы выборки и на место каждого вставляет указанный HTML-код.
jQ_object.replaceWith(DOM-элемент) => jQuery
Удаляет из DOM-дерева все элементы выборки и на место каждого вставляет указанный DOM-элемент (элементы).
jQ_object.replaceWith(jQuery-объект) => jQuery
Удаляет из DOM-дерева все элементы выборки и на место каждого вставляет элементы, представленные jQuery-объектом.
jQ_object.replaceWith(функция) => jQuery
Удаляет из DOM-дерева все элементы выборки и на место каждого вставляет HTML-код, возвращаемый указанной функцией. Данная функция выполняется для каждого элемента выборки отдельно.
При запуске функции первым аргументом передаётся индекс элемента в выборке. Вторым аргументом передаётся текущее HTML-содержимое элемента. Ссылка на сам элемент хранится в переменной this.

Примеры

<html>
<head>
  <title>Работа с элементами DOM</title>
  <script type="text/javascript" src="js/jquery.js"></script>
</head>
<body>
  <ul>
    <li>Элемент списка</li>
    <li>Элемент списка</li>
  </ul>
</body>
</html>
 
<script>
$('ul')
  .replaceWith(function (index, content) {
    return '<ol>' + content + '</ol>';
  });
/* Замена элемента <ul> на <ol> */
</script>
  1. Элемент списка
  2. Элемент списка
<html>
<head>
  <title>Работа с элементами DOM</title>
  <script type="text/javascript" src="js/jquery.js"></script>
</head>
<body>
  <p class="par1">Параграф 1</p>
  <p>Параграф 2</p>
  <p class="par3">Параграф 3</p>
</body>
</html>
 
<script>
$('.par1')
  .replaceWith($('.par3'));
/* Замена 1-го параграфа на 3-й */
</script>

Параграф 3

Параграф 2