Работа с html-содержимым элемента

Материал из JQuery

Перейти к: навигация, поиск
.html()

Возвращает или изменяет html-содержимое выбранных элементов страницы. Функция имеет три варианта использования:

.html():string1.0
возвращает html-содержимое выбранного элемента. Если таких элементов несколько, то значение будет взято у первого.
.html(newHTML):jQuery1.0
заменяет содержимое всех выбранных элементов на newHTML.
.html(elements):jQuery1.6
перемещает элементы страницы elements внутрь выбранных элементов (их прежнее содержимое будет при этом удалено). elements можно задать DOM-элементом или объектом jQuery. Данная форма использования метода html является недокументированной (спасибо zandroid за подсказку)
.html(function(index, value)):jQuery1.4
заменяет содержимое выбранных элементов на возвращенное пользовательской функцией значение. Функция вызывается отдельно, для каждого из выбранных элементов. При вызове ей передаются следующие параметры: index — позиция элемента в наборе, value — текущее html-содержимое.

Примеры использования:

$(".topBlock").html() вернет html-содержимое первого элемента с классом topBlock.
$(".topBlock").html("<p>Новье!</p>") изменит содержимое всех элементов с классом topBlock на параграф с текстом "Новье!".

Замечание: важно отметить, что используя метод .html() вы получите содержимое только первого элемента из всех выбранных. Если вам нужны содержимое всех выбранных элементов, то следует использовать конструкции типа .map() или .each().

В действии

найдем контейнер, содержащий красный элемент и добавим в него еще и зеленый:

~lt~!DOCTYPE html~gt~
~lt~html~gt~
~lt~head~gt~
  ~lt~script src="http://code.jquery.com/jquery-latest.js"~gt~~lt~/script~gt~
  ~lt~style~gt~
   .container{
      height: 60px;
      width: 200px;
      border: 2px solid #eedddd;
      margin:15px;
   }
   .box{
      float: left;
      height: 40px;
      width: 40px;
      margin: 5px;
      padding: 5px;
      font-size:20pt;
      background-color: #eee;
    }
    .red{
       background-color: #ccaaaa;
    }
    .green{
       background-color: #aaccaa;
    }
  ~lt~/style~gt~
~lt~/head~gt~
~lt~body~gt~
  ~lt~div class="container"~gt~
  	 ~lt~div class="box red"~gt~ 1 ~lt~/div~gt~
  	 ~lt~div class="box"~gt~ 2 ~lt~/div~gt~
  ~lt~/div~gt~
  ~lt~div class="container"~gt~
  	 ~lt~div class="box"~gt~ 3 ~lt~/div~gt~
  	 ~lt~div class="box"~gt~ 4 ~lt~/div~gt~
  ~lt~/div~gt~
~lt~script~gt~
  $(".container").html(function(indx, oldHtml){
    if($(oldHtml).hasClass("red"))
    	return oldHtml + '~lt~div class="box green"~gt~ 2.5 ~lt~/div~gt~';
    else
    	return oldHtml;
  });
~lt~/script~gt~
~lt~/body~gt~
~lt~/html~gt~

Ссылки

Поисковые ключи:
  • html-содержимое элементов
  • получить html-содержимое элементов
  • изменить html-содержимое элементов
  • установить html-содержимое элементов
  • .html()
  • html()