Добавление нужного содержимого после элементов. Метод 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

Оставить комментарий