Изучаем jQuery. Добавление новых элементов

После создания новых элементов нам потребуется средство для того, чтобы вставить их в нужное место веб-страницы. Для этого предназначены несколько функций jQuery. Первой из тех, что мы рассмотрим, является функция insertAfter...
insertBefore также добавляет новый элемент в виде элемента-брата существующего элемента, однако он будет размещаться непосредственно перед ним.

Из книги "Изучаем jQuery. 2-е изд.", стр.58

.prependTo(target) - добавляет все выбранные элементы внутрь другого набора элементов перед существующим контентом (target - элемент, внутрь которого будут вставлены выбранные элементы).
.appendTo(target) - добавляет все выбранные элементы внутрь другого набора элементов после существующего контента.

Теперь если у пользователя по каким-то причинам отключён JavaScript, он не увидит на странице кнопку, но увидит скрытое содержимое.

...
<p class="spoiler">
  <img src="pic-1.jpg">
  <img src="pic-2.jpg">
  <img src="pic-3.jpg">
</p>
...

$(document).ready(function(){
  $('.spoiler').hide();
  $('<input type="button" id="toggleButton" value="Показать"/>')
  .insertAfter('p:first');

  $('#toggleButton').click(function(){
    $('.spoiler').toggle();
    
    if($('.spoiler').is(':visible')) {
      $(this).val('Скрыть');
    } else {
      $(this).val('Показать');
    }
  });
});