русский  עברית
tadam logo
Нашли ошибку в тексте?
Отметьте её курсором и нажмите
Ctrl + Enter
Проверка орфографии Xhtml.co.il
Orphus system
Рассылка
Присоединитесь к списку рассылки для получения последних новостей

Введите адрес электронной почты:

.appendTo( цель )

Возвращает: jQuery

Описание: Вставляет каждый элемент в наборе соответствующих элементов в конец цели.

.appendTo( цель )

Добавлена в версию: 1.0
Селектор, элемент, строка HTML, или объект jQuery; соответствующий набор элементов будет вставлен в конец элемента(ов), указанного в параметре.

Методы .append() и .appendTo() выполняют теже задачи. Основное отличие заключается в синтаксисе, в расположении содержания и цели. С .append(), выражение выбора предшествующее методу это контейнер в который содержание будет внесенно. С .appendTo(), с другой стороны, содержание предшествует методу, как и селектор выражения, разметка создается на лету, и оно вставляется в целевой контейнер.

Рассмотрим следующий HTML:

<h2>Greetings</h2>
<div class="container">
  <div class="inner">Hello</div>
  <div class="inner">Goodbye</div>
</div>
Мы можем создать содержимое и вставить его в несколько элементов одновременно:
$('<p>Test</p>').appendTo('.inner');

Каждый внутренний элемент <div> получает свое новое содержание:

<h2>Greetings</h2>
<div class="container">
  <div class="inner">
    Hello
    <p>Test</p>
  </div>
  <div class="inner">
    Goodbye
    <p>Test</p>
  </div>
</div>

Мы также можем выбрать элемент на странице и вставить его в другой элемент:

$('h2').appendTo($('.container'));

Если выбранный элемент таким образом вставить в другие места, он будет перемещен в элемент цели (не клонирован):

<div class="container">
  <div class="inner">Hello</div>
  <div class="inner">Goodbye</div>
  <h2>Greetings</h2>
</div>

Если имеется более чем один целевой элемент, будет, тем не менее, создана клонированная копия для каждой цели после первой.

Примеры

Добавляет все блоки span к элементу с ID «foo».
$("span").appendTo("#foo"); // check append() examples
Результат выполнения кода выше:
Full code:
<!DOCTYPE html>
<html>
<head>
<script src="http://code.jquery.com/jquery-latest.js"></script>  
  <script>
  $(document).ready(function(){
$("span").appendTo("#foo"); // check append() examples
  });
  </script>
  <style>#foo { background:yellow; }</style>
</head>
<body>
  <span>I have nothing more to say... </span>
  <div id="foo">FOO! </div>
</body>
</html>
Была ли эта информация полезной?
   

Комментарии