Разбираемся как добавить HTML до или после выбранного элемента.
В предыдущей главе мы разобрали как менять текст и HTML. Прочитать материалы из предыдущего урока можно по этой ссылке: jQuery. Урок 5. В этой главе речь пойдет про append и prepend.
6.1 Как добавить HTML внутрь выбранных элементов в самый конец
Для этого будем использовать append, он добавит контент после имеющихся:
$(function (){
$('body').append('<p>НОВЫЙ!</p>');
});
Предположим что наш HTML до скрипта был таким:
... <body> <span>Test</span> </body> ...
А после применения скрипта мы получим:
... <body> <span>Test</span> <p>НОВЫЙ!</p> </body> ...
Как правило, добавляют новый контент именно в самый конец body, после успешного ajax, но это не значит что это единственный способ применения. Вы можете добавлять обычный текст, в любой класс, или тег параграфа, например.
6.2 Как добавить HTML внутрь выбранных элементов в начало
.prepend() добавляет контент внутрь выбранных элементов сразу ПЕРЕД уже существующим контентом. Вызывается аналогичным образом из 6.1, а результатом работы будет:
А после применения скрипта мы получим:
... <body> <p>НОВЫЙ!</p> <span>Test</span> </body> ...
Есть также интересный пример на JS:
$(“p”).prepend(document.createTextNode(“Hello World”));
6.3 Пара слов о .prependTo() и .appendTo()
Возьмем немного из документации:
.prepend(), .prependTo()
в начало элементов elements будет добавлен content, который может быть задан html-текстом, объектом jQuery или DOM объектом. Различия функций заключается только в порядке следования содержимого и элементов, в которые это содержимое должно быть помещено.
и далее пример в котором показывается что следующие два выражения будут равнозначны:
$(".list").prepend("<li class='item'> Тест </li>"); $("<li class='item'> Тест </li>").prependTo($(".list"));
6.4 Пара слов о .after(), .insertAfter(), .before() и .insertBefore()
Данное изображение наиболее полным образом объясняет всю разницу работы:
Код при этом сильно не меняется:
$(".it1").after("<li class='item'>Тест</li>"); $("<li class='item'>Тест</li>").insertAfter($(".it1"));
