Авторский знак. Авторский знак. Seosait21.ru Есть у человека надежда. Пока не поздно. Вгрызайся и изучай.

октябрь 2020
Пн Вт Ср Чт Пт Сб Вс
1 2 3 4
5 6 7 8 9 10 11
12 13 14 15 16 17 18
19 20 21 22 23 24 25
26 27 28 29 30 31


Чувашия-это моя Россия

Функция append().

Функция Функция добавляет код внутрь каждого подходящего элемента.

Работа функции append() заключается в добавлении HTML-кодов в качестве последнего дочернего элемента выбранного для замены блока, элемента при создании своего сайта. Таким образом, функция append() вставляет (добавляет) фрагмент HTML разметки ( или создаваемые по ходу выполнения элементы), или перемещает существующие элементы, определяемые с помощью параметра source, позади существующего содержимого элементов в выборке jQuery (позади всех дочерних элементов).

По простому говоря, метод .append() добавляет код внутрь каждого выбранного и притом подходящему этому элементу.

Есть немного отличающаяся функция appendTo(), которая перемещает все элементы набора jQuery в конец содержимого каждого элемента, определяемого с помощью параметра destination (позади всех дочерних элементов.

Допустим мы выбрали блок:

                 
                      < div id="nav">
                      < h3>Здесь находится меню страницы.< /h3>
                      < /div>

и хотим добавить строку как последний элемент в этом блоке < p>Здравствуйте, уважаемые читатели!< /p>, тогда пишем :

 
                      $('#nav').append('< p>Здравствуйте, уважаемые читатели!< /p>');

запускаем сценарий и наша функция append() произведет следующее:

                   
                      < div id="nav">
                      < h3>Здесь находится меню страницы.< /h3>
                      < p>Здравствуйте, уважаемые читатели!< /p>
                      < /div>

Абзац p будет последним элементом в блоке div и будет находиться перед закрывающимся тегом < /div>.

Потому как абзац p есть дочерний элемент блока div ( div > p)

Посмотрим еще пример:

Пусть на данной странице Вашего сайта имеются два сортированных списка в таком виде: 

                      < ol class="spisok l1">
                          < li class="stroka" style="color: #090">Первая строка из первого списка.< /li>	
                          < li class="stroka" style="color: #090">Вторая строка из первого списка.< /li>	
                      < /ol>
                      < ol class="spisok l2">
                          < li class="stroka" style="color: #F00">Первая строка из второго списка.< /li>	
                          < li class="stroka" style="color: #F00">Вторая строка из второго списка.< /li>	
                          < li class="stroka" style="color: #F00">Третья строка из второго списка.< /li>	
                      < /ol>
  1. Первая строка из первого списка.
  2. Вторая строка из первого списка.

  1. Первая строка из второго списка.
  2. Вторая строка из второго списка.
  3. Третья строка из второго списка.

следующие две строки кодов программ будут одинаковы, хотя Вы видите разные функции append() и appendTo() :

                      $('.spisok').append('< li class="stroka" style="color: #FC0">Проверочная строка.< /li>');

                      $('< li class="stroka" style="color: #F6C">Проверочная строка.< /li>').appendTo($('.spisok'));

в обоих случаях элемент списка с текстом "Проверочная строка." будет добавлен в конец элементов с классом spisok. Чтобы Вы могли заметить и оценить, что каждая функция действует, я тестовые строки " Проверочная строка" раскрасил по-разному. Результат действия функциии $('.spisok').append('< li class="stroka" style="color: #FC0">Проверочная строка.< /li>'); покрасил в желтую строчку. Результат действия функции $('< li class="stroka" style="color: #F6C">Проверочная строка.< /li>').appendTo($('.spisok')); в оранжевую строку. Таким образом, строка " Проверочная строка" отображается дважды в одном списке, но разными цветами: желтым и оранжевым. В результате, текст нашей страницы станет следующим:

 
                      < ol class="spisok l1">
                          < li class="stroka">Первая строка из первого списка.< /li>	
                          < li class="stroka">Вторая строка из первого списка.< /li>	
                          < li class="stroka">Проверочная строка.< /li>
                          < li class="stroka">Проверочная строка.< /li>		
                      < /ol>
                      < ol class="spisok l2">
                          < li class="stroka">Первая строка из второго списка.< /li>	
                          < li class="stroka">Вторая строка из второго списка.< /li>	
                          < li class="stroka">Третья строка из второго списка.< /li>	
                          < li class="stroka">Проверочная строка.< /li>	
                          < li class="stroka">Проверочная строка.< /li>	
                      < /ol>
  1. Первая строка из первого списка.
  2. Вторая строка из первого списка.

  1. Первая строка из второго списка.
  2. Вторая строка из второго списка.
  3. Третья строка из второго списка.

Заметьте,что вставляемые элементы в данном случае не скопированы, но перемещены согласно написанных кодов программы. Вот, посмотрите, на следущий пример. Напишем так ( как обычно выбранные элементы, связываем действия которые будут выполняться над элементами через точки), обращайте на это внимание, потому что у Вас должен выработаться автоматизм связывания:

                     $('.l2').append($('.l1 li:last'));

эта связка переместит последний элемент li из первого списка, в конец второго:

  
                      < ol class="spisok l1">
                          < li class="stroka">Первая строка из первого списка.< /li>	
                      < /ol>
                      < ol class="spisok l2">
                          < li class="stroka">Первая строка из второго списка.< /li>	
                          < li class="stroka">Вторая строка из второго списка.< /li>	
                          < li class="stroka">Третья строка из второго списка.< /li>	
                          < li class="stroka">Вторая строка из первого списка.< /li>	
                      < /ol>
  1. Первая строка из первого списка.
  2. Вторая строка из первого списка.

  1. Первая строка из второго списка.
  2. Вторая строка из второго списка.
  3. Третья строка из второго списка.

seosait21.ru
HTML

seosait21.ru
CSS

seosait21.ru
Web-диз.
HTML ссылка CSS ссылка ...

seosait21.ru
JavaScript

seosait21.ru
PHP

seosait21.ru
JQuery
JavaScript ссылка PHP ссылка JQuery ссылка

seosait21.ru
SEO.

seosait21.ru
MySQL

seosait21.ru
XML
... ... ...

обратно на главную     назад    дальше     вперед

ПОНРАВИЛОСЬ?
ПОДЕЛИСЬ с ДРУЗЬЯМИ: