Методы замены элемента

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

•    replaceWith{<Выражение>) — заменяет все элементы коллекции на <Выражение>. В качестве параметра может быть указан HTML-код, DOM-элемент или коллекция элементов jQuery. Для примера заменим элемент с идентификатором
divi на новый элемент при щелчке на нем.



$("#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>
<р>Абзац1</р>
<р>Абзац2</р>

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

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

•    replaceAll (< Селектор >) — вставляет созданный элемент вместо всех элементов, соответствующих указанному селектору. Заменим элемент с идентификатором div1 на другой элемент.

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

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

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

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

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *