Работа с html-содержимым элемента
.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="https://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~
