Метод append() в jQuery
Метод append() в jQuery позволяет добавить к элементам, удовлетворяющим заданному условию, новые элементы или контент в конец его содержимого. Если вам необходимо добавить что-то в начало выбранного элемента (родителя), то используйте метод prepend().
Допустим, у нас дан такой код:
1 2 3 4 5 |
<h1>Привет!</h1>
<div class="general">
<div class="item">1</div>
<div class="item">2</div>
</div>
|
Теперь добавим к каждому элементу div с классом item текст ‘ пункт’:
1 |
$( ".item" ).append( " пункт" ); |
В результате мы получим следующее:
1 2 3 4 5 |
<h1>Привет!</h1>
<div class="general">
<div class="item">1 пункт</div>
<div class="item">2 пункт</div>
</div>
|
Также мы можем выбрать какой-то элемент на странице и добавить его в конец другого элемента:
1 |
$( ".general" ).append( $( "h1" ) ); |
В данном случае элемент H1 не будет клонирован, а будет просто перемещен в указанное место.
1 2 3 4 5 |
<div class="general">
<div class="item">1 пункт</div>
<div class="item">2 пункт</div>
<h1>Привет!</h1>
</div>
|
Однако, если на странице несколько целевых элементов (в нашем случае div.general), то для каждого из них вставляемый элемент будет клонирован за исключением последнего.
Метод append() принимает также дополнительные параметры — это тоже «контент» , который будет вставлен в указанную локацию. Например:
1 |
$( ".general" ).append( "<span>Тест</span>", "<span>Второй тест</span>", "<span>Третий тест</span>"); |
В данном случае в конец элемента .general будет добавлено три элемента span.
Категория: jQuery