Методы before() и after()

В предыдущей главе мы использовали методы append() и prepend() , чтобы вставлять что-нибудь внутрь элемента. но порой бывает нужно вставить что-то перед (before) или после (after) элементов. В jQuery для этого есть методы before() и after(), и их также легко использовать. Проверьте следующий пример:

<a href="javascript:void(0);" onclick="$('input.test1').before('<i>Before</i>');">Before</a>   
<a href="javascript:void(0);" onclick="$('input.test1').after('<b>After</b>');">After</a>

<br /><br />

<input type="text" class="test1" value="Input 1" name="txtInput1" /><br />
<input type="text" class="test1" value="Input 2" name="txtInput2" /><br />

В зависимости от того, по какой ссылке вы кликните, тег жирности или курсива будет вставлен перед или после каждого элемента input с классом "test1". Как и append() и prepend(), оба метода after() и before() позволяют использовать строки HTML, элементы DOM и объекты jQuery в качестве параметров и принимают их неограниченное количество. Я продемонстрирую это следующим примером:

<a href="javascript:void(0);" onclick="InsertElements();">Insert elements</a>
<br /><br />
<span id="spnTest2">Hello world? </span>

<script type="text/javascript">
function InsertElements()
{
	var element1 = $("<b></b>").text("Hello ");
	var element2 = "<i>there </i>";
	var element3 = document.createElement("u");
	element3.innerHTML = "jQuery!";
	
	$("#spnTest2").after(element1, element2, element3);
}
</script>

В данном примере мы создали объект jQuery, строку HTML и JavaScript DOM-элемент, а затем воспользовались методом after(), чтобы вставить их после тега span. Разумеется, метод before() можно было бы использовать точно так же.

У методов before() и after() есть побратимы insertBefore() и insertAfter(). Они делают все то же самое, но только в обратной записи: вместо того, чтобы вызывать их у элемента, перед или после которого мы хотим выполнить вставку, и передавать то, что вставляем в качестве параметра, нужно сделать ровно наоборот. Какой метод использовать - зависит от ситуации, но вот пример, который демонстрирует оба подхода:

<a href="javascript:void(0);" onclick="InsertElementsBefore();">Insert elemenets</a>
<br /><br />
<span id="spnTest3">Hello world? </span>

<script type="text/javascript">
function InsertElementsBefore()
{	
	$("#spnTest3").before($("<i></i>").text("before() "));
	$("<b></b>").text("insertBefore() ").insertBefore("#spnTest3");
}
</script>

В данном примере мы вставляем объекты перед тегом span, но можно, конечно, так же использовать after() и insertAfter(), чтобы вставить их после. Как вы можете видеть, результат одинаковый, меняется только порядок записи.