Последние учебники веб-разработки
 

jQuery - Добавление элементов

❮ Предыдущая Следующая Глава ❯

С помощью JQuery, легко добавлять новые элементы / содержание.

Добавить HTML Содержимое

Мы рассмотрим четыре метода JQuery, которые используются для добавления нового контента:

  • append() - Вставляет содержимое в конце выбранных элементов
  • prepend() - содержание Вставки в начале выбранных элементов
  • after() того, как after() - Вставляет содержимое после выбранных элементов
  • before() тем before() - Вставляет содержимое до выбранных элементов

JQuery append() Метод

Jquery append() метод вставляет содержимое в конце выбранных элементов HTML.

пример

$("p").append("Some appended text.");
Попробуй сам "

JQuery prepend() Метод

JQuery prepend() метод вставляет содержимое в начале выбранных элементов HTML.

пример

$("p").prepend("Some prepended text.");
Попробуй сам "

Добавить несколько новых элементов с append() и prepend()

В обоих приведенных выше примерах, мы только вставить какой-либо текст / HTML в начало / конец выбранных элементов HTML.

Тем не менее, как append() и prepend() методы могут принимать бесконечное число новых элементов в качестве параметров. Новые элементы могут быть созданы с текстом / HTML (как мы сделали в приведенных выше примерах), с JQuery, или с кодом JavaScript и элементов DOM.

В следующем примере мы создаем несколько новых элементов. Элементы создаются с текстом / HTML, JQuery и JavaScript / DOM. Затем мы добавляем новые элементы к тексту с append() метод (это сработало бы для prepend() тоже):

пример

function appendText() {
    var txt1 = "<p>Text.</p>";               // Create element with HTML 
    var txt2 = $("<p></p>").text("Text.");   // Create with jQuery
    var txt3 = document.createElement("p");  // Create with DOM
    txt3.innerHTML = "Text.";
    $("p").append(txt1, txt2, txt3);         // Append the new elements
}
Попробуй сам "

JQuery after() того, как before() after() и before() тем before() Методы

Jquery after() того, как after() метод вставляет содержимое после выбранных элементов HTML.

Jquery before() метод вставляет содержимое перед выбранным HTML - элементов.

пример

$("img").after("Some text after");

$("img").before("Some text before");
Попробуй сам "

Добавить несколько новых элементов с after() того, как before() after() и before() тем before()

Кроме того , как after() того, как before() after() и before() того before() методы могут принимать бесконечное число новых элементов в качестве параметров. Новые элементы могут быть созданы с текстом / HTML (как мы сделали в приведенном выше примере), с JQuery, или с кодом JavaScript и элементов DOM.

В следующем примере мы создаем несколько новых элементов. Элементы создаются с текстом / HTML, JQuery и JavaScript / DOM. Затем вставить новые элементы в тексте с after() того, как before() after() метод (это бы работал before() тоже):

пример

function afterText() {
    var txt1 = "<b>I </b>";                    // Create element with HTML 
    var txt2 = $("<i></i>").text("love ");     // Create with jQuery
    var txt3 = document.createElement("b");    // Create with DOM
    txt3.innerHTML = "jQuery!";
    $("img").after(txt1, txt2, txt3);          // Insert new elements after <img>
}
Попробуй сам "

Проверьте себя с упражнениями!

Упражнение 1 » Упражнение 2» Упражнение 3 » Упражнение 4»

JQuery HTML Ссылка

Полный обзор всех методов JQuery HTML, пожалуйста , перейдите на наш / CSS Reference JQuery HTML .


❮ Предыдущая Следующая Глава ❯