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

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

$("#div1").click(function() {
   $("#div1").replaceWith("<u>Новый элемент</u>");
});
<div id="div1">Нажмите здесь</div>

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

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

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

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

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

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

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

<p>Абзац1</p><p>Абзац2</p>
Какой-то текст<br>
$("<u>Новый элемент</u>").replaceAll("#div1");

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

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

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

Предыдущая статья Все статьи Следующая статья