jQuery предоставляет несколько методов, таких как append(), prepend(), html(), text(), before(), after(), wrap() и т.д., которые позволяют нам вставлять новое содержимое в существующий HTML элемент, до него или после.
Методы jQuery html() и text() отвечают непосредственно за добавление нового содержимого (html код или текст) в выбранный элемент. При этом текущее содержимое тэга будет заменено. Давайте рассмотрим более подробно остальные методы.
Метод jQuery append()
Метод jQuery append() используется для вставки содержимого в конец выбранных элементов.
Следующий пример добавит некоторый HTML-код ко всем абзацам после загрузки документа, а при нажатии на кнопку, добавится еще и некоторый текст к основному блоку с id #container:
<script type="text/javascript"> $(document).ready(function(){ // Добавление элемента ко всем параграфам после загрузки документа $("p").append(' <a href="#">read more...</a>'); // Добавление текста в блок с айди container $("button").click(function(){ $("#container").append("This is demo text."); }); }); </script>
Метод jQuery prepend()
Метод prepend() используется для вставки содержимого в начало выбранных элементов.
Следующий пример добавит некоторый HTML-код ко всем абзацам после загрузки документа, а при нажатии на кнопку, добавится еще и некоторый текст к основному блоку с id #container. В отличии от метода append(), метод prepend() добавляет содержимое в начало тэга:
<script type="text/javascript"> $(document).ready(function(){ // Добавление элемента ко всем параграфам после загрузки документа $("p").prepend("<strong>Note:</strong> "); // Добавление текста в блок с айди container $("button").click(function(){ $("#container").prepend("This is demo text."); }); }); </script>
Вставка нескольких элементов с помощью методов append() и prepend()
JQuery append() и prepend() также поддерживает передачу нескольких аргументов в качестве параметров.
Код jQuery в следующем примере вставит элемент <h1>, <p> и <img> внутри элемента <body> в качестве последних трех дочерних узлов.
<script type="text/javascript"> $(document).ready(function(){ var newHeading = "<h1>Note:</h1>"; var newParagraph = document.createElement("p"); newParagraph.innerHTML = "<em>Lorem Ipsum...</em>"; var newImage = $('<img src="images/smiley.png" alt="Smile">'); $("body").append(newHeading, newParagraph, newImage); }); </script>
Метод jQuery before()
Метод jQuery before() используется для вставки содержимого перед выбранными элементами.
В следующем примере будет вставлен абзац перед элементом контейнера в готовом документе, тогда как вставка изображения перед элементом <h1> будет выполнена при нажатии кнопки.
<script type="text/javascript"> $(document).ready(function(){ // Добавить элемент до контейнера $("#container").before("<p>— Lorem Ipsum —</p>"); // Добавить контент до заголовка $("button").click(function(){ $("h1").before('<img src="images/symbol.gif" alt="Symbol">'); }); }); </script>
Метод jQuery after()
Метод jQuery after() используется для вставки содержимого после выбранных элементов.
В следующем примере будет вставлен абзац после элемента контейнера в загруженном документе, а вставка изображения после элемента <h1> при нажатии кнопки.
<script type="text/javascript"> $(document).ready(function(){ // Добавить элемент после контейнера $("#container").after("<p>— Lorem Ipsum —</p>"); // Добавить элемент после заголовка $("button").click(function(){ $("h1").after('<img src="images/symbol.gif" alt="Symbol">'); }); }); </script>
Вставка нескольких элементов с помощью метода before() и after()
JQuery before() и after() также поддерживает передачу нескольких аргументов в качестве параметров. В следующем примере перед элементами <p> будут вставлены элементы <h1>, <p> и <img>.
<script type="text/javascript"> $(document).ready(function(){ var newHeading = "<h2>Heading:</h2>"; var newParagraph = document.createElement("p"); newParagraph.innerHTML = "<em>Lorem Ipsum...</em>"; var newImage = $('<img src="images/symbol.png" alt="Symbol">'); $("p").before(newHeading, newParagraph, newImage); }); </script>
Метод jQuery wrap()
Метод jQuery wrap() используется для вставки HTML вокруг выбранных элементов.
Код jQuery в следующем примере обернет элементы контейнера элементом <div> с классом .wrapper в готовом документе, тогда как весь внутренний контент элементов абзаца обернет сначала элементом <b>, а затем - элементом <em>.
<script type="text/javascript"> $(document).ready(function(){ // Оборачиваем контейнер новым элементов с классом wrapper $(".container").wrap('<div class="wrapper"></div>'); // Оборачиваем содержимое параграфа элементами b и em $("button").click(function(){ $("p").contents().wrap("<em><b></b></em>"); }); }); </script>
Оставить комментарий