www.jQueryBook.ru - jQuery документация

 

Сегодня: 06 декабря 2016 года, Вторник
Раздел API на стадии наполнения...

 

 

 

  • Категории: Manipulation › DOM Insertion, Inside

    .append()

    Добавляет или перемещает содержимое, определяемое во входном параметре, в конец содержимого каждого элемента набора jQuery.

Синтаксис и описание:

  • Добавлено в jQuery 1.0.append( source )

  • Добавлено в jQuery 1.4.append( function( [index, html] ) )

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

Возвращаемое значение: (объект) Набор jQuery.

Параметры:

  • source – (строка | элемент | объект jQuery ) Строка с кодом разметки HTML, либо ссылка на существующий или созданный на лету DOM-элемент, либо набор jQuery.

  • function( [index, html] ) – (функция) Возвращает HTML строку, которая предназначена для вставки в конце существующего содержимого каждого элемента в наборе jQuery перед закрывающим тегом. В качестве входных параметров получает index (индекс, номер текущего элемента в наборе jQuery начиная с 0) и html (старое содержимое текущего элемента).

  1. Примечание:

    До версии jQuery 1.3, если в качестве места назначения определены не один, а несколько элементов, то все существующие исходные элементы не перемещаются, а копируются и вставляются в конец каждого принимающего элемента, сами оставаясь при этом в своем прежнем местоположении.

  2. Примечание:

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

Примеры:

  1.  

    <h2>Функция jQuery <b>append</b></h2>
    <div class="container">
      <div class="inner">Вставить внутри элемента</div>
      <div class="inner">Переместить внутрь элемента</div>
    </div>
    
    // Создадим на лету параграф <p>, добавим его в конец содержимого 
    // всех элементов с классом 'inner' и переместим заголовок <h2>, 
    // вставив его после всех дочерних элементов блока с классом 'container'.
    
    <script type="text/javascript">
     $('.inner').append('<p>***</p>');
     $('.container').append($('h2'));
    </script>

    Результат:

    <div class="container">
      <div class="inner">
        Вставить внутри элемента
        <p>***</p>
      </div>
      <div class="inner">
        Переместить внутрь элемента
        <p>***</p>
      </div>
      <h2>Функция jQuery <b>append</b></h2>
    </div>
  2.  

    // В конец содержимого каждого элемента <p>
    // поместить сгенерированный текстовый узел "jQuery".  
    
    <p>JavaScript библиотека </p>
    
    <script type="text/javascript">
      $("p").append(document.createTextNode("jQuery"));
    </script>

    Результат:

    <p>JavaScript библиотека jQuery</p>
  3.  

    // В конце каждого пункта списка вставить его порядковый номер  
    
    <ul>
     <li>Элемент</li>
     <li>Элемент</li>
     <li>Элемент</li>
    </ul>
    
    <script type="text/javascript">
     $("li").append(function(i){ 
       return " №" + i;
      });
    </script>

    Результат:

    <ul>
     <li>Элемент №0</li>
     <li>Элемент №1</li>
     <li>Элемент №2</li>
    </ul>

[ наверх ]










 




Справочник по jQuery JavaScript API на русском языке