Робота зі структурою сторінки

Створення та додавання дочірніх елементів

Створення нових елементів

Для створення нових елементів розмітки html можна використовувати функцію jQuery, передавши їй як параметр код розмітки, що додається:

Тут ми просто створюємо новий елемент, при цьому він поки не додається в html-розмітку веб-сторінки.

Метод clone

Альтернативним способом створення нових елементів є метод clone . Цей метод просто клонує розмітку вже існуючого елемента:

Додавання елементів

Саме створення елементів було б марним, якби ми не могли б їх додати до структури веб-сторінки. Для додавання jQuery надає кілька методів append/prepend.

Метод append

Метод append додає елемент до кінця елемента вибірки. Він має такі варіанти використання:

append('розмітка html') : вставляє вказану в параметрі розмітку html у кінець елемента вибірки

append(елемент): вставка елемента в кінець елемента вибірки

append(jQuery) : вставляти об'єкт jQuery в кінець елемента вибірки

append(функція) : в кінці елемента вибірки вставляється рядок з розміткою html, елемент html або об'єкт jQuery, які повертаються функцією

Наприклад, у нас є наступний список:

Застосуємо метод append:

В результаті підсумковий список буде виглядати так:

Функція викликається для кожного елемента вибірки і приймає два аргументи: index - індекс поточного елемента вибірки, що перебирається, і html - розмітка поточного елемента вибірки. На виході в даному випадку повертається об'єкт jQuery, хоча також ми можемо повернути просто рядок з розміткою і елемент html.

Метод prepend

Метод prepend схожий на метод append, тільки додає новий елемент упочаток елемента вибірки. Він має такі варіанти використання:

prepend('розмітка html') : вставляє вказану в параметрі розмітку html на початок елемента вибірки

prepend(елемент) : вставка елемента на початок елемента вибірки

prepend(jQuery) : вставлення об'єкта jQuery на початок елемента вибірки

prepend(функція) : на початок елемента вибірки вставляється рядок з розміткою html, елемент html або об'єкт jQuery, які повертаються функцією

Застосуємо метод append:

Застосування функції буде аналогічно до її використання в методі append . А результатом попереднього коду буде наступна розмітка:

В результаті підсумковий список буде виглядати так:

Методи appendTo та prependTo

Методи appendTo і prependTo додають об'єкти як дочірні елемент, який вказаний у параметрі методу. Наприклад, вище у нас додавалися елементи до списку. Частково перепишемо приклад, використовуючи appendTo і prependTo:

Отже, методи appendTo і prependTo як параметри можуть приймати або об'єкт jQuery, або елемент html. У першому випадку спочатку ми створюємо об'єкт jQuery з розмітки ($('C#')) і потім додаємо його на початок елемента, у якого >

---