Изменение 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>
MouseDC.ru - хостинг, виртуальный хостинг, покупка доменов, проверка доменов, WHOIS, курсы создания сайтов, вебинары по созданию, курсы разработки сайтов, доработка сайтов, сопровождение сайтов, разработка сайтов, техподдержка сайтов
Была ли эта статья полезна? Есть вопрос?
Cмотрите другие статьи: