jQuery метод .appendTo()

Определение и применение

jQuery метод .appendTo() позволяет вставить содержимое в конец каждого целевого элемента в наборе совпавших элементов. Метод вставляет указанное содержимое как последний дочерний элемент.

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

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

jQuery синтаксис:

Синтаксис 1.0:

$( content ).appendTo( selector )

content - htmlString, или Element, или jQuery (объект) // не позволяет вставить текстовое содержимое напрямую

target - selector, или htmlString, или Element, или Array, или jQuery (объект)

Добавлен в версии jQuery

Значения параметров

Пример использования

Пример использования jQuery метода .appendTo()

Нажмите ▶, затем выполните действие из пояснения. Измените JavaScript и запустите пример ещё раз. В редакторе используется jQuery 4.0.0.

index.html

HTML

<button>Клик</button><br /><br />
<p>Первый абзац</p>
<p>Второй абзац</p>
<ul>
  <li>Список</li>
</ul>

main.js

JavaScript

$(document).ready(function () {
    $('button').click(function () {
        $('<b> Hello</b>').appendTo('p')
        $('<li>Hello</li>').appendTo('ul')
    })
})

В этом примере с использованием jQuery метода .appendTo() мы при нажатии на элемент <button> (кнопка) вставляем содержимое в конец каждого целевого элемента <p> в документе, а также добавлем элемент списка <li> как последний дочерний элемент в маркированный список (целевой элемент <ul>).

В следующем примере мы рассмотрим нюансы синтаксиса метода .appendTo():

Использование jQuery метода .appendTo() (нюансы синтаксиса)

Нажмите ▶, затем выполните действие из пояснения. Измените JavaScript и запустите пример ещё раз. В редакторе используется jQuery 4.0.0.

index.html

HTML

<button>Клик</button><br /><br /><i>=)</i>
<p>Первый абзац</p>
<p>Второй абзац</p>
<ol></ol>
<ul></ul>

main.js

JavaScript

$(document).ready(function () {
    $('button').click(function () {
        var x = '<span> Hello world </span>'

        $(document.createTextNode(' Hello world ')).appendTo('p:first')
        $(x).appendTo('p:last')
        $($('i')).appendTo('p')
        $('<li>Hello world</li>').appendTo(['ol', 'ul'])
    })
})

В этом примере с использованием jQuery метода .appendTo() мы при нажатии на элемент <button> (кнопка):

1. С помощью JavaScript метода .createTextNode создаем текстовый узел и вставляем его в конец первого элемента <p> в документе. Обращаю Ваше внимание, что напрямую методом .appendTo() текстовое содержимое не добавить.
2. Вставляем значение переменной x, которая содержит HTML строку в конец последнего элемента <p> в документе.
3. Вставляем содержимое объекта jQuery в конец каждого целевого элемента <p>, при этом элемент <i> "вырезается" из первоначальной позиции.
4. Вставляем HTML строку в конец целевых элементов <ol> (нумерованный список) и <ul> (маркированный список) в документе. Обратите внимание, что при указании нескольких целевых элементов, необходимо пречислять их внутри массива.