Метод 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

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