Наиболее часто используемой операцией является изменение содержимого элементов. Вне библиотеки jQuery для этой цели используется свойство innerHTML объекта document. Например, чтобы вставить новый фрагмент в элемент с идентификатором div1, можно воспользоваться следующим кодом.

   document.getElementById("div1").innerHTML = "Новый текст";

Библиотека jQuery также позволяет использовать это свойство. Для этого находим элемент с помощью функции $(), а затем преобразуем коллекцию элементов jQuery в набор DOM-элементов.

   $("#div1") [0].innerHTML = "Новый текст"; 
Для этой цели можно также воспользоваться методом get() .
  $("#div1").get(0).innerHTML = "Новый текст";
В библиотеке jQuery для изменения содержимого элементов предназначены следующие методы.

text([<3начение>]) — позволяет получить или задать текст элемента. Если параметр не указан, то метод возвращает текстовое значение без тегов. При наличии нескольких элементов в коллекции будут возвращены все значения в виде строки. Если необходимо получить значение только первого элемента из коллекции, то можно воспользоваться методом eq() .

   alert($("div").eq(0).text());
Можно также ограничить набор с помощью селектора :first.

   alert($("div:first").text());
При указании строки в качестве параметра она заменит содержимое всех элементов коллекции. В случае наличия в строке специальных символов они будут заменены на HTML-эквиваленты.

   $("div").text("<b>Новое значение</b>");
В этом примере строка в исходном HTML-коде будет выглядеть следующим образом.
&lt;b&gt;Новое значение&^;/b&gt;

html([<3начеиие>]) — позволяет получить или задать HTML-код элемента. Если параметр не указан, то метод возвращает значение вместе с тегами. При наличии нескольких элементов в коллекции будет возвращено значение только первого элемента.

   alert($("div").html());
При указании HTML-кода в качестве параметра он заменит содержимое всех элементов коллекции, и объектная модель документа будет обновлена. Выведем HTML-код во всех тегах <div>.

   $("div").text("<b>Новое значение</b>");

Если необходимо изменить значение только первого элемента из коллекции, то можно воспользоваться методом eq() или селектором :first.

   $("div:first").html("<b>Новое значение</b>");

append{<Выражение>) — добавляет <Выражение> в конец содержимого выбранного элемента. В качестве параметра может быть указан HTML-код, DOM-элемент или коллекция элементов jQuery. Для примера добавим HTML-код в конец элемента.

   $("#div1").append("<u>Новый текст</u>");

   <div id="div1">

       <b>Текст</b>

   </div>
Результат будет выглядеть следующим образом. 

   <div id="div1">

     <b>Текст</b>

     <u>Новый текст</u>

   </div>
Теперь добавим DOM-элемент.

   $("#div1").append($("<u>Новый текст</u>").get(0));

А теперь добавим созданный элемент коллекции jQuery.

   $("#div1").append($("<u>Новый текст</u>"));

prepend(<Выражение>) — добавляет <Выражение> в начало содержимого выбранного элемента. В качестве параметра может быть указан HTML-код, DOM-элемент или коллекция элементов jQuery. Метод полностью идентичен методу append(), за исключением того, что добавляет <Выражение> не в конец элемента, а в его начало. Для примера добавим HTML-код в начало элемента.

   $("#div1").prepend("<u>Новый текст</u>");

   <div id="div1">

       <b>Текст</b>

   </div>
Результат будет выглядеть следующим образом.

   <div id="div1">

     <u>Новый текст</u>

     <b>Текст</b>

   </div>

appendTo(<Селектор>) — добавляет коллекцию элементов jQuery в конец всех элементов, соответствующих указанному селектору. Для примера добавим HTML-код в конец элемента с идентификатором div1.

   $("<u>Новый текст</u>").appendTo("#div1");
Результат будет таким же, как и при использовании метода append() .
   $("#div1").append("<u>Новый текст</u>");
Как видно из примера, мы поменяли параметры местами и использовали метод append() вместо метода appendTo().

prependTo(<Селектор>) — добавляет коллекцию элементов jQuery в начало всех элементов, соответствующих указанному селектору. Для примера добавим HTML-код в начало элемента с идентификатором div1.

   $("<u>Новый текст</u>").prependTo("#divl");

Результат будет таким же, как и при использовании метода prepend() .

   $("#div1").prepend("<u>Новый текст</u>");