.append( содержание )
Возвращает: jQuery
Описание: Вставляет содержимое, заданное параметром, к концу каждого элемента в наборе соответствующих элементов.
.append( содержание )
Добавлена в версию: 1.0
Элемент, строка HTML, или объект jQuery для добавления в конец каждого элемента в наборе соответствующих элементов.
.append( function(индекс, html) )
Добавлена в версию: 1.4
function(индекс, html)
Функция, которая возвращает строку HTML для вставления в конец каждого элемента в наборе соответствующих элементов. Получает индекс положения элемента в наборе, и старое значение HTML элемента в качестве аргументов.
Метод .append() вставляет определенное содержание, как последний ребенок каждого элемента в набор jQuery (Для того чтобы вставить его как первого ребенка, используйте .prepend()).
Методы .append() и .appendTo() выполняют теже задачи. Основное отличие заключается в синтаксисе, в расположении содержания и цели. С .append(), выражение выбора предшествующее методу это контейнер в который содержание будет внесенно. С .appendTo(), с другой стороны, содержание предшествует методу, как и селектор выражения, разметка создается на лету, и оно вставляется в целевой контейнер.
Рассмотрим следующий HTML:
<h2>Greetings</h2> <div class="container"> <div class="inner">Hello</div> <div class="inner">Goodbye</div> </div>
Мы можем создать содержимое и вставить его в несколько элементов одновременно:
$('.inner').append('<p>Test</p>');
Каждый внутренний элемент <div> получает свое новое содержание:
<h2>Greetings</h2>
<div class="container">
<div class="inner">
Hello
<p>Test</p>
</div>
<div class="inner">
Goodbye
<p>Test</p>
</div>
</div>
Мы также можем выбрать элемент на странице и вставить его в другой элемент:
$('.container').append($('h2'));
Если выбранный элемент таким образом вставить в другие места, он будет перемещен в элемент цели (не клонирован):
<div class="container"> <div class="inner">Hello</div> <div class="inner">Goodbye</div> <h2>Greetings</h2> </div>
Если имеется более чем один целевой элемент, будет, тем не менее, создана клонированная копия для каждой цели после первой.
Примеры
Пример 1
Добавляет код HTML ко всем параграфам.Пример 1 - Полный код:
<!DOCTYPE html> <html> <head> <script src="http://code.jquery.com/jquery-latest.js"></script> <script> $(document).ready(function(){ $("p").append("Hello"); }); </script> <style>p { background:yellow; }</style> </head> <body> <p>I would like to say: </p> </body> </html>
Пример 2
Добавляет элемент ко всем параграфам.Пример 2 - Полный код:
<!DOCTYPE html> <html> <head> <script src="http://code.jquery.com/jquery-latest.js"></script> <script> $(document).ready(function(){ $("p").append(document.createTextNode("Hello")); }); </script> <style>p { background:yellow; }</style> </head> <body> <p>I would like to say: </p> </body> </html>
Пример 3
Добавляет объект jQuery (аналогично массиву элементов DOM) ко всем параграфам.Пример 3 - Полный код:
<!DOCTYPE html> <html> <head> <script src="http://code.jquery.com/jquery-latest.js"></script> <script> $(document).ready(function(){ $("p").append( $("strong") ); }); </script> <style>p { background:yellow; }</style> </head> <body> <strong>Hello world!!!</strong><p>I would like to say: </p> </body> </html>
Была ли эта информация полезной?
