.insertAfter( цель )
Возвращает: jQuery
Описание: Вставляет каждый элемент в наборе соответствующих элементов после цели.
.insertAfter( цель )
Добавлена в версию: 1.0
Селектор, элемент, строка HTML, или объект jQuery; соответствующий набор элементов будет вставлен после элемента(ов), указанного в параметре.
Методы .after() и .insertAfter() выполняют теже задачи. Основное отличие заключается в синтаксисе, в расположении содержания и цели. С .after(), выражение выбора предшествующее методу это контейнер, после которого содержание будет внесенно.
С .insertAfter(), с другой стороны, содержание предшествует методу, как и селектор выражения, разметка создается на лету, и оно вставляется после целевого контейнера.
Рассмотрим следующий HTML:
<div class="container"> <h2>Greetings</h2> <div class="inner">Hello</div> <div class="inner">Goodbye</div> </div>
Мы можем создать содержимое и вставьте его в несколько элементов одновременно:
$('<p>Test</p>').insertAfter('.inner');
Каждый элемент <div class="inner"> получит своё новое содержание:
<div class="container"> <h2>Greetings</h2> <div class="inner">Hello</div> <p>Test</p> <div class="inner">Goodbye</div> <p>Test</p> </div>
Мы также можем выбрать элемент на странице и вставить его после другого элемента:
$('h2').insertAfter($('.container'));
Если выбранный элемент таким образом вставить в другие места, он будет перемещен после элемента цели (не клонирован):
<div class="container"> <div class="inner">Hello</div> <div class="inner">Goodbye</div> </div> <h2>Greetings</h2>
Если имеется более чем один целевой элемент, будет, тем не менее, создана клонированная копия для каждой цели после первой.
Примеры
Вставляет все параграфы после элемента с id «foo». То же самое, что и $("#foo").after("p")Полный код:
<!DOCTYPE html> <html> <head> <script src="http://code.jquery.com/jquery-latest.js"></script> <script> $(document).ready(function(){ $("p").insertAfter("#foo"); // check after() examples }); </script> <style>#foo { background:yellow; }</style> </head> <body> <p> is what I said... </p><div id="foo">FOO!</div> </body> </html>
Была ли эта информация полезной?
