Манипуляции над элементами

— Создали мы элемент, и что дальше делать с ним? — Добавим его на страницу, ведь каждому элементу нужен свой DOM.

Настало время научиться добавлять элементы на страничку. Все необходимые нам методы собраны в одном разделе документации – Manipulation. С некоторыми из них мы уже познакомились, и осталось совсем чуть-чуть:

after(content)	вставляет контент после каждого элемента из выборки, т.е. если вы встречаете строку $('p').after('<hr/>'), читайте её как «после каждого параграфа будет добавлена линия»
insertAfter(element)	вставляет элементы из выборки после каждого элемента переданного в качестве аргумента, т.е. если вы встречаете строку $('<hr/>').insertAfter('p') , читайте её как «линия будет добавлена после каждого параграфа»

— Хм, а я разницы не увидел!

— Тут всё легко, присмотритесь:

$("нашли элемент").after("что добавляем после него?")
$("что добавляем").insertAfter("после какого элемента?")

Повторим. Берем произвольный текст, и добавляем его после каждого параграфа:

$('p').after('(^_^)ノ')

Если мы хотим добавить новый DOM-элемент, то можем в качестве параметра передавать строку с HTML и надеятся на то, что jQuery разберётся что с ним делать:

$('p').after('<hr/>')

Если захотим переместить DOM-элемент, то надо будет его явно «выбрать» с помощью вызова jQuery:

$('p').after($('h1'))

Если мы так не сделаем, то получим совсем другой результат:

$('p').after('h1')

Хорошо, метод after() рассмотрели, на очереди метод before():

before(content)	вставляет контент перед каждым выбранным элементом
insertBefore(element)	вставляет элементы из выборки перед каждым элементом, переданным в качестве аргумента

— Так, ну вроде понятно становится:

$("нашли элемент").before("что добавляем перед ним?")
$("что добавляем").insertBefore("перед каким элементом?")

Манипуляции с DOM: "after()" и "before()"anton.shevchuk.name

---

Следующие методы берут искомые элементы и вносят в них изменения:

append(content)	вставляет контент в конец каждого элемента из выборки, т.е. строку кода $("p").append("<hr/>") следует читать как «в конец каждого параграфа будет добавлена линия»
appendTo(element)	вставляет выбранный контент в конец каждого элемента, переданного в качестве аргумента; $("<hr/>").appendTo("p") — «линия будет добавлена в конец каждого параграфа»

— Опять про разницу:

$("нашли элемент").append("что туда дописываем?")
$("что дописываем").appendTo("в какой элемент?")

prepend(content)	вставляет контент в начало каждого элемента из выборки
prependTo(element)	вставляет выбранный контент в начало каждого элемента, переданного в качестве аргумента

Манипуляции с DOM: "append()" и "prepend()"anton.shevchuk.name

---

Так, с этим кусочком документации вроде как разобрались. Опять же, почувствуйте разницу перечисленных методов, ведь дальше будут ещё:

replaceWith(content)	заменяет найденные элементы новым: $("p").replaceWith("<hr/>")
replaceAll(target)	вставляет контент взамен найденному: $("<hr/>").replaceAll("h3")

— А, ну да:

$("нашли элемент").replaceWith("на что меняем?")
$("что вставляем").replaceAll("вместо чего?")

Манипуляции с DOM: "replaceWith()" и "replaceAll()"anton.shevchuk.name

---

wrap(element)	оборачивает каждый найденный элемент новым элементом; т.е. мы конфеты из коробки заворачиваем в фантики
wrapAll(element)	оборачивает найденные элементы новым элементом; мы берём пучок конфет и заворачиваем в один большой фантик
wrapInner(element)	оборачивает контент каждого найденного элемента новым элементом; берём конфеты, каждую распаковываем, заворачиваем в свой фантик, и сверху заворачиваем в родной фантик
unwrap()	удаляет родительский элемент у найденных элементов; фантики прочь!

Я тут конечно могу строить из себя умника, но в действительности, я тоже постоянно подглядываю имена методов, когда работаю с DOM.

Манипуляции с DOM: "wrap()" и собратьяanton.shevchuk.name

---

Вот вам домашнее задание – напишите скрипт, который добавит следующий HTML-код на страницу:

<div id="my">
  <div id="precious">
    <p class="gold">Ring</p>
  </div>
</div>