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