Изменение HTML через jQuery часть 2 (prepend, append, before, after, insert)

Для добавления HTML элементов на страницу в библиотеке jQuery есть целый набор методов. Они позволяют вставлять код до и после определённых узлов, внутри и снаружи. Разберём как использовать их.

Добавление в начало и конец элемента (prepend, append)

Для добавления HTML кода внутрь существующего элемента можно использовать два метода: prepend, append. Первый добавляет код в начало элемента, а второй в конец. Придумаем пример, в котором продемонстрируем использование двух методов одновременно:

<div id="mouse">Тише, мыши, кот на крыше</div>
<script>
   $('#mouse').prepend('/начало/');
   $('#mouse').append('/конец/');
</script>

Результат будет таким:

<div id="mouse">/начало/Тише, мыши, кот на крыше/конец/</div>

- в примере в начало и конец строки были добавлены строки '/начало/' и '/конец/'. Но можно добавлять и строки с HTML кодом. К примеру, можно вместо '/начало/' поставить '<b>/начало/</b>', и вместо '/конец/' поставить '<b>/конец/</b>'

Существуют два метода, которые являются родственниками (практически синонимами) приведённых в этом параграфе. Это методы appendTo и prependTo. Разница незначительная в том, что если в "prepend" и "append" надо передавать HTML код, который будет вставлен, то в "appendTo" и "prependTo" надо передавать селектор элементов. То есть если переписать предыдущий пример через appendTo и prependTo, то значения в круглых скобках поменяются местами:

<div id="mouse">Тише, мыши, кот на крыше</div>
<script>
   $('<div>/начало/</div>').prependTo('#mouse');
   $('<div>/конец/</div>').appendTo('#mouse');
</script>

Правда в отличии от "prepend" и "append" в этом примере нельзя просто поставить '/начало/' и '/конец/'. Нужно обрамить их тегами. Но результат будет полностью идентичен результату предыдущего примера:

<div id="mouse">/начало/Тише, мыши, кот на крыше/конец/</div>

Добавление до и после элемента (before, after)

Чтобы добавить HTML код до или после элемента необходимо использовать методы before или after. Продемонстрируем это:

<div id="mouse">Тише, мыши, кот на крыше</div>
<script>
   $('#mouse').before('<div>/начало/</div>');
   $('#mouse').after('<div>/конец/</div>');
</script>

Результат выполнения такого кода:

<div>/начало/</div>
<div id="mouse">Тише, мыши, кот на крыше</div>
<div>/конец/</div>

Как и в случае с "prepend" и "append", у "before" и "after" существуют синонимы. Это методы insertAfter и insertBefore. Разница между ними аналогичная: если в "before" и "after" надо передавать HTML код, который будет вставлен, то в "insertAfter" и "insertBefore" надо передавать селектор элементов. Если переписать предыдущий пример через insertAfter и insertBefore, то значения в круглых скобках поменяются местами:

<div id="mouse">Тише, мыши, кот на крыше</div>
<script>
   $('<div>/начало/</div>').insertBefore('#mouse');
   $('<div>/конец/</div>').insertAfter('#mouse');
</script>

Результат будет аналогичен результату из предыдущего примера:

<div>/начало/</div>
<div id="mouse">Тише, мыши, кот на крыше</div>
<div>/конец/</div>