jQuery предоставляет несколько методов, таких как append(), prepend(), html(), text(), before(), after(), wrap() и т. д., которые позволяют нам вставлять новое содержимое в существующий элемент.

jQuery-методы html() и text() уже рассматривались в предыдущей главе, поэтому в этой главе мы поговорим об остальных из них.

jQuery-метод append()

jQuery-метод append() используется для вставки содержимого в конец выбранных элементов.

Следующий пример добавит некоторый HTML-код ко всем абзацам готового документа, а при клике на кнопку другой HTML-код.

<script>
$(document).ready(function(){
    // Добавляем ко всем абзацам
    $("p").append(' <a href="#">read more...</a>');
    
    // Добавляем элемент к id контейнеру
    $("button").click(function(){
       $("#container").append("This is demo text.");
    });
});
</script>

jQuery-метод prepend()

jQuery-метод prepend() используется для вставки содержимого в начало выбранных элементов.

В следующем примере будет добавлен некоторый HTML-код ко всем абзацам готового документа, а некоторый текст — к элементу контейнера при нажатии кнопки.

<script>
$(document).ready(function(){
    // Добавляем ко всем абзацам
    $("p").prepend("<strong>Note:</strong> ");
    
    // Добавляем элемент к id контейнеру
    $("button").click(function(){
       $("#container").prepend("This is demo text.");
    });
});
</script>

Вставляем несколько элементов с помощью методов append() и prepend()

JQuery-методы append() и prepend()также поддерживает передачу нескольких аргументов в качестве входных данных.

Код jQuery в следующем примере вставит элемент <h1>, <p> и <img> внутрь элемента <body>.

<script>
$(document).ready(function(){
    var newHeading = "<h1>Important Note:</h1>";
    var newParagraph = document.createElement("p");
    newParagraph.innerHTML = "<em>Lorem Ipsum is dummy text...</em>";
    var newImage = $('<img src="images/smiley.png" alt="Symbol">');
    $("body").append(newHeading, newParagraph, newImage);
});
</script>

jQuery-метод before()

jQuery-метод before() используется для вставки содержимого перед выбранными элементами.

В следующем примере будет вставлен абзац перед элементом контейнера в готовом документе, тогда как при нажатии кнопки будет вставлено изображение перед элементом <h1>.

<script>
$(document).ready(function(){
    // Добавляем содержимое перед элементом с id container
    $("#container").before("<p>&mdash; The Beginning &mdash;</p>");
    
    // Добавляем контент перед заголовком
    $("button").click(function(){
        $("h1").before('<img src="images/marker-left.gif" alt="Symbol">');
    });
});
</script>

Содержимое или элементы, вставленные с использованием jQuery-методов before() и after(), добавляются за пределы выбранных элементов.

jQuery-метод after()

jQuery-метод after() используется для вставки содержимого после выбранных элементов.

В следующем примере будет вставлен абзац после элемента контейнера в готовом документе, а вставка изображения после элемента <h1> при нажатии кнопки.

<script>
$(document).ready(function(){
    // Добавляем содержимое после элемента с id container
    $("#container").after("<p>&mdash; The End &mdash;</p>");
    
    // Добавляем контент после заголовка
    $("button").click(function(){
        $("h1").after('<img src="images/marker-right.gif" alt="Symbol">');
    });
});
</script>

Вставляем несколько элементов с помощью методов before() и after()

JQuery-методы before() и after() также поддерживает передачу нескольких аргументов в качестве входных данных. В следующем примере будут вставлены элементы <h1>, <p> и <img> перед элементами <p>.

<script>
$(document).ready(function(){
    var newHeading = "<h2>Important Note:</h2>";
    var newParagraph = document.createElement("p");
    newParagraph.innerHTML = "<em>Lorem Ipsum is dummy text...</em>";
    var newImage = $('<img src="images/smiley.png" alt="Symbol">');
    $("p").before(newHeading, newParagraph, newImage);
});
</script>

jQuery-метод wrap()

jQuery-метод wrap() используется для оборачивания HTML-тегов вокруг выбранных элементов.

Код jQuery в следующем примере обернет элементы контейнера <div> с классом .wrapper в готовом документе, тогда как весь внутренний контент элементов абзаца обернет сначала элементом <b>, а затем — элементом <em>.

<script>
$(document).ready(function(){
    // Оборачиваем элементом div с классом wrapper элемент container
    $(".container").wrap('<div class="wrapper"></div>');
    
    // Оборачиваем содержимое абзаца тегами b и em
    $("button").click(function(){
        $("p").contents().wrap("<em><b></b></em>");
    });
});
</script>

Похожие посты

Руководство по синтаксису в jQuery

Оператор jQuery обычно начинается со знака доллара ($) и заканчивается точкой с запятой (;). В jQuery знак доллара ($) — это просто псевдоним для jQuery. Давайте рассмотрим следующий пример кода, который демонстрирует синтаксис кода на jQuery. Приведенный выше пример просто отображает предупреждающее сообщение «Hello World!» пользователю. Объяснение кода Давайте разберем приведенный выше пример подробнее. Тег…

Руководство по методу animate() в jQuery

jQuery-метод animate() используется для создания пользовательских анимаций. Метод animate() обычно используется для анимации числовых CSS-свойств, таких как width, height, margin, padding, opacity, top, left и т. д., Но нечисловые свойства, такие как color или background-color нельзя анимировать с помощью базовой функциональности jQuery. Не все CSS-свойства являются анимируемыми. Как правило, любое CSS-свойство, которое принимает значения в…

Руководство по callback-функциям в jQuery

Операторы JavaScript выполняются построчно. Но, поскольку для завершения эффекта jQuery требуется некоторое время, код следующей строки может выполняться, пока предыдущий эффект все еще выполняется. Чтобы этого не происходило, jQuery предоставляет функцию обратного вызова (Callback) для каждого метода. Функция обратного вызова — это функция, которая выполняется после завершения эффекта. Функция обратного вызова передается в качестве аргумента…

Насколько публикация полезна?

Нажмите на звезду, чтобы оценить!

Средняя оценка 5 / 5. Количество оценок: 1

Оценок пока нет. Поставьте оценку первым.