Добавление сестринских элементов

Если метод wrap имеет дело с родительскими элементами, а методы append/prepend - с дочерними, то для добавления элементов одного уровня или сестер(сиблингов) используются методы before/after/insertBefore/insertAfter.

Метод before

Метод before вставляет новый элемент перед каждым элементом выборки. Он имеет следующие способы использования:

• before('разметка html'): добавляет в разметку перед каждым элементом выборки элемент, создаваемый из разметки html

• before(элемент): добавляет в разметку перед каждым элементом выборки элемент html, переданный в качестве параметра

• before(jQuery): добавляет в разметку перед каждым элементом выборки в объект jQuery

• before(функция): добавляет в разметку перед каждым элементом выборки объект, возвращаемый функцией

Допустим, у нас есть следующий список:

<ul>
<li class="lang">Java</li>
<li class="lang">C/C++</li>
<li class="lang">PHP</li>
</ul>

Используя метод before, мы можем добавить новый элемент списка в начало:

	// добавление с помощью кода разметки
	$('li.lang').first().before('<li class="lang">JavaScript</li>');
	
	// добавление нового элемента html
	var vbItem = document.createElement('li');
	vbItem.innerHTML='Visual Basic';
	$('li.lang').first().before(vbItem);

После добавления новые элементы окажутся в начале списка:

<ul>
<li class="lang">Visual Basic</li>
<li class="lang">JavaScript</li>
<li class="lang">Java</li>
<li class="lang">C/C++</li>
<li class="lang">PHP</li>
</ul>

Метод after

Похожим образом работает метод after, за тем исключением, что добавление идет в конец списка.

• after('разметка html'): добавляет после каждого элемента выборки элемент, создаваемый из разметки html

• after(элемент): добавляет после каждого элемента выборки элемент html, переданный в качестве параметра

• after(jQuery): добавляет после каждого элемента выборки в объект jQuery

• after(функция): добавляет после каждого элемента выборки объект, возвращаемый функцией

Возьмем предыдущий пример со списком и добавим в него пару элементов:

	// добавление с помощью кода разметки
	$('li.lang').last().after('<li class="lang">JavaScript</li>');
	
	// Добавление объекта jQuery через клонирование последнего элемента
	$('li.lang').last().after($('li.lang').last().clone().html('Visual Basic'));

Метод insertBefore

Метод insertBefore по своему действию похож на метод before, только в качестве параметра он принимает элемент, перед которым будет происходить добавление. Он имеет следующий синтаксис:

• insertBefore('разметка html'): элемент добавляется перед элементом, создаваемым из разметки html

• insertBefore(элемент): элемент добавляется перед элементом html, который передается в качестве параметра

• insertBefore(jQuery): элемент добавляется перед объектом jQuery

• insertBefore('селектор'): элемент добавляется перед объектом, который соответствует селектору

Фактически это тот же метод before, только здесь объект jQuery и элемент, относительно которого производится вставка, меняются местами:

$('<li class="lang">JavaScript</li>').insertBefore('li.lang:first');

Здесь элемент <li class="lang">JavaScript</li> будет добавлен перед элементом, который соответствует селектору li.lang:first

Метод insertAfter

Метод insertAfter похож на метод after, только, как и метод insertBefore, в качестве параметра он принимает элемент, после которого будет происходить добавление. Он имеет следующие варианты использования:

• insertAfter('разметка html'): элемент добавляется после элемента, создаваемого из разметки html

• insertAfter(элемент): элемент добавляется после элемента html, который передается в качестве параметра

• insertAfter(jQuery): элемент добавляется после объекта jQuery

• insertAfter('селектор'): элемент добавляется после элемента, который соответствует селектору

$('<li class="lang">JavaScript</li>').insertAfter('li.lang:last');