Вставка элементов

Для вставки элементов в jQuery предусмотрено 4 метода:

1. .append()
2. .prepend()
3. .after()
4. .before()

Метод .prepend() позволяет добавлять текст в начало элементов:

<p>Текст абзаца.</p>

<script>
$('p').prepend('<b>!!!</b>');
</script>

Метод .append() позволяет добавлять текст в конец элементов:

<p>Текст абзаца.</p>

<script>
$('p').append('<b>!!!</b>');
</script>

Метод .before() позволяет добавлять текст в перед элементами:

<p>Текст абзаца.</p>

<script>
$('p').before('<b>!!!</b>');
</script>

Метод .after() позволяет добавлять текст в после элементов:

<p>Текст абзаца.</p>

<script>
$('p').after('<b>!!!</b>');
</script>

Альтернативные методы

Существуют также альтернативные формы методов для вставки элементов.

Вместо .append() можно использовать .appendTo(). Разница в способе применения, если append принимает параметром вставляемые текст, то appendTo наоборот параметром принимает селектор элементов, для которых следует применить append.

Следующие записи эквиваленты:

$('.www').append('<b>!!!</b>');
$('<b>!!!</b>').appendTo('.www');

Методы .prepend() и .prependTo():

$('.www').prepend('<b>!!!</b>');
$('<b>!!!</b>').prependTo('.www');

Методы .before() и .insertBefore():

$('.www').before('<b>!!!</b>');
$('<b>!!!</b>').insertBefore('.www');

Методы .after() и .insertAfter():

$('.www').after('<b>!!!</b>');
$('<b>!!!</b>').insertAfter('.www');