jQuery append(content)

Поиск функций jQuery

Характеристика функции

[Функция] append(content)

Раздел "Manipulation"

Функция добавляет код внутрь каждого подходящего элемента.

Параметры

append(content)

1.2

content: содержимое добавляемое к объекту.

append(function(index,html))

1.4

function(index, html): Функция возвращающая HTML строку для вставки её к окончанию каждого из подходящих элементов в наборе. Дополнительно к этому функция получает позицию индекса элемента в набор и предыдущее значение HTML элемента как аргументы.

Описание

Данная функция подобна поведению функции appendChild для всех обозначенных элементов, добавляемых в документ.

Возможно, Вам будет интересно прочитать статьи о jQuery:

Примеры

Пример:

Добавить HTML код ко всем параграфам.

Пример
Весь код

"jQuery"

$("p").append("<strong>Hello</strong>");

"HTML"

I would like to say:

"CSS"

  
p { background:yellow; }

"Живой пример jQuery"

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" 
                    "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<link href="http://slyweb.ru/css/jqueryiframe.css" 
rel="stylesheet" type="text/css"/>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.5.0/jquery.min.js"></script>
<script>
  $(document).ready(function(){

$("p").append("<strong>Hello</strong>");

  });
</script>

</head>
<body class="iframe">


I would like to say: 


</body>
</html>


<style>
  
p { background:yellow; }

</style>

Пример:

Добавить элемент ко всем параграфам.

Пример
Весь код

"jQuery"

$("p").append(document.createTextNode("Hello"));

"HTML"

I would like to say:

"CSS"

  
p { background:yellow; }

"Живой пример jQuery"

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" 
                    "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<link href="http://slyweb.ru/css/jqueryiframe.css" 
rel="stylesheet" type="text/css"/>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.5.0/jquery.min.js"></script>
<script>
  $(document).ready(function(){

$("p").append(document.createTextNode("Hello"));

  });
</script>

</head>
<body class="iframe">


I would like to say: 


</body>
</html>


<style>
  
p { background:yellow; }

</style>

Пример:

Добавить jQuery объект (аналогично массиву DOM элементов) ко всем параграфам.

Пример
Весь код

"jQuery"

$("p").append( $("strong") );

"HTML"

<strong>Hello</strong>I would like to say:

"CSS"

  
p { background:yellow; }

"Живой пример jQuery"

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" 
                    "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<link href="http://slyweb.ru/css/jqueryiframe.css" 
rel="stylesheet" type="text/css"/>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.5.0/jquery.min.js"></script>
<script>
  $(document).ready(function(){

$("p").append( $("strong") );

  });
</script>

</head>
<body class="iframe">


<strong>Hello</strong>I would like to say: 


</body>
</html>


<style>
  
p { background:yellow; }

</style>

Пример:

Присоединение элемента с id hello к каждому из элементов с id inner, с отображением индекса каждого элемента находящегося в наборе.

Пример
Весь код

"jQuery"

$('.inner').append(function(i,html) {
  return '<div class="'+html+'" >Новый элемент с новым классом!</div>';
});

"HTML"

  <div class="inner">Hello</div>
  <div class="inner">Hello</div>

"CSS"

  
  div { border: 2px solid blue; }
  p { background:yellow; margin:4px; }

"Живой пример jQuery"

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" 
                    "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<link href="http://slyweb.ru/css/jqueryiframe.css" 
rel="stylesheet" type="text/css"/>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.5.0/jquery.min.js"></script>
<script>
  $(document).ready(function(){

$('.inner').append(function(i,html) {
  return '<div class="'+html+'" >Новый элемент с новым классом!</div>';
});

  });
</script>

</head>
<body class="iframe">


  <div class="inner">Hello</div>
  <div class="inner">Hello</div>


</body>
</html>


<style>
  
  div { border: 2px solid blue; }
  p { background:yellow; margin:4px; }

</style>

Метод появился в jQuery 1.2

Официальная страница метода - http://api.jquery.com/append/

Форма для комментариев

Версия jQuery 1.4.2 Документ создан 2010-08-21

Руководство jQuery 1.4.2

Плагины jQuery UI

Эффекты

Возможно, Вам будет интересно прочитать статьи о jQuery: