Добавление нужного содержимого после элементов. Метод after() в jQuery
Метод after() в jQuery позволяет добавить новый элемент или множество элементов к другому элементу или множеству элементов, выбранных по определенному критерию.
Рассмотрим это на конкретном примере. Допустим, у нас есть такой html-код:
1 2 3 4 5 |
<div class="content"> <h1>Привет!</h1> <div class="sub">Иван</div> <div class="sub">Дмитрий</div> </div> |
Мы хотим добавить после каждого элемента div с именем абзац текста. Это можно реализовать следующим образом:
1 |
$( ".sub" ).after( "<p>Текст после имени</p>" ); |
В результате мы получим:
1 2 3 4 5 6 7 |
<div class="content"> <h1>Привет!</h1> <div class="sub">Иван</div> <p>Текст после имени</p> <div class="sub">Дмитрий</div> <p>Текст после имени</p> </div> |
Также мы можем переместить нужный элемент в выборке, вставив его после другого элемента, например:
1 |
$( ".content" ).after( $( "h1" ) ); |
В итоге получится:
1 2 3 4 5 |
<div class="content"> <div class="sub">Иван</div> <div class="sub">Дмитрий</div> </div> <h1>Привет!</h1> |
Можно также создать что-то «на лету» и добавить в тело страницы:
1 2 3 4 5 6 7 8 |
$( "<span></span>" ) .after( "<div></div>" ) .addClass( "test" ) .filter( "div" ) .attr( "id", "new" ) .html( "Привет!" ) .end() .appendTo( "body" ); |
Метод addClass() добавит к обоим элементам span и div класс «test». Затем мы фильтруем элемент div и добавляем его id и содержание. В конце добавляем оба элемента к body. Будет добавлено:
1 2 |
<span class="test"></span> <div class="test" id="new">Привет!</div> |
Категория: jQuery