Учим jQuery — Часть 6

Разбираемся как добавить 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"));

Следующий урок про клик в jQuery

автор: Dmitriy

Занимаюсь веб-разработкой с 2011 года. Посмотреть некоторые из моих работ, а также узнать чуть больше обо мне, вы можете на forwww.ru.

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *