Статья, в которой рассмотрим, какие в jQuery есть методы для чтения и изменения содержимого HTML элементов.
В jQuery имеются три метода, которые позволяют напрямую работать с контентом элемента:
html
– для чтения и изменения HTML содержимого элемента;text
– для чтения и изменения текстового содержимого элемента;val
– для чтения и изменения значения элементов формы.
Например, получим HTML содержимое элемента с идентификатором (id
) contact
:
// сохраним HTML контент элемента в переменную contactHTML
var contactHTML = $('#contact').html();
Если выборка содержит несколько элементов, то данный метод вернёт HTML контент только первого элемента:
<p>Содержимое 1...</p>
<p>Содержимое 2...</p>
...
<script>
var htmlContent = $('p').html();
console.log(htmlContent);
</script>
Для того чтобы получить HTML контент всех найденных элементов необходимо воспользоваться циклом (например, each
):
$('p').each(function(){
// выведем содержимое текущего элемента в консоль
console.log($(this).html());
});
Изменение HTML контента элемента
Например, заменим содержимое элемента ul
:
<ul>
<li>молоко 1 литр</li>
<li>яйца 2 шт.</li>
<li>мука 270 гр.</li>
</ul>
...
<script>
$('ul').html('<li>молоко 500 мл литр</li><li>яйца 3 шт.</li><li>мука 200 гр.</li>');
</script>
Если на странице будет несколько элементов ul
, то данный метод заменит содержимое каждого из них.
Если необходимо изменить контент только у одного элемента на странице, то наиболее просто это сделать через id
.
<ul id="ingredients">
...
</ul>
...
<script>
$('#ingredients').html('Новый HTML контент...');
</script>
Использование функции для замены HTML контента элемента:
<h2>Название 1...</h2>
<h2>Название 2...</h2>
<h2>Название 3...</h2>
...
<script>
$('h2').html(function(index, oldhtml) {
// index – индекс элемента в выборке
// oldhtml – контент элемента
var newhtml = (index+1) + '. ' + oldhtml;
return newhtml;
});
</script>
Например, изменим контент элементов (зачеркнём старый контент и добавим рядом новый):
<div class="number">75</div>
<div class="number">37</div>
<div class="number">64</div>
<div class="number">17</div>
<div class="number">53</div>
...
<script>
var newNumber = [];
for (var i = 0; i <= 4; i++) {
newNumber[i] = Math.floor(Math.random() * 99) + 1;
};
$('.number').html(function(index, oldhtml) {
// index – индекс элемента в выборке
// oldhtml – контент элемента
// this – текущий элемент
// изменим фон текущего элемента на случайный
$(this).css('background-color','yellow');
var newhtml = '<s>'+oldhtml+'</s> '+ newNumber[index];
return newhtml;
});
</script>
Получение текстового содержимого элемента
В jQuery получение содержимого элемента в виде обычного текста осуществляется с помощью метода text
. При этом все HTML теги, если они присутствуют в контенте, будут вырезаны.
Например, получим текстовое содержимое элемента p
и выведем его в контент другого элемента:
<p id="output"></p>
<button id="get-text">Получить текстовый контент элемента p</button>
<p id="text">Этот параграф содержит <a href="#">ссылку</a>.</p>
...
<script>
$('#get-text').click(function() {
var textContent = $('#text').text();
$('#output').text(textContent);
});
</script>
Метод text
также как и html
возвращает содержимое только первого элемента выборки (если в ней присутствуют несколько элементов).
Замена контента элемента указанным текстом
Метод text
может использоваться не только для чтения, но и для изменения содержимого указанного элемента. При этом HTML теги (если они присутствуют в тексте) будут закодированы с помощью спецсимволов.
<div id="info">
Некоторый контент...
</div>
...
<script>
$('#info').text('<p>Другой контент...</p>');
</script>
После выполнения, элемент div с классом info будет иметь следующий HTML код:
<div id="info">
<p>Другой контент...</p>
</div>
На экране данный элемент будет выглядеть так:
<p>Другой контент...</p>
Если в выборке присутствует несколько элементов, то метод text
заменит содержимое каждого из них:
<p>Контент 1 ...</p>
<p>Контент 2 ...</p>
<p>Контент 3 ...</p>
...
<script>
$('p').text('Новый контент...');
</script>
Использование в качестве параметра метода text
функции (добавим в скобках к содержимому каждого выбранного элемента длину его текстовой информации):
<p class="text">Некоторое содержимое...</p>
<p class="text">Ещё некоторый контент...</p>
...
<script>
$('.text').text(function(index,text) {
// параметры функции: index (порядковый номер элемента в выборке), text (его текущее содержимое)
var textLength = text.length;
return text + ' ('+ text.length +')';
});
</script>
Удаление контента элемента
В jQuery для удаления содержимого элемента имеется метод empty
. Данный метод не только удаляет элементы, но и другие его дочерние узлы, включая текст.
Например, удалим содержимое всех элементов с классом vote
:
<div class="vote">Контент...</div>
...
<script>
$('.vote').empty();
</script>
Получение значения элемента формы
В jQuery чтение значений элементов input
, select
и textarea
осуществляется посредством метода val
.
Например, получим значение элемента input
:
<input type="text" id="quantity" name="quantity" value="3" />
...
<script>
// сохраним значение в переменную quantity
var quantity = $('#quantity').val();
// выведем значение переменной quantity в консоль
console.log(quantity);
</script>
Метод val
, если в коллекции присутствует несколько элементов, вернёт значение только первого из них.
<input name="color" type="radio" value="white"> Белый<br>
<input name="color" type="radio" value="green" checked> Зелёный<br>
<input name="color" type="radio" value="brown"> Коричневый<br>
...
<script>
// получим значение первого элемента в коллекции
var valColor = $('input[name="color"]').val();
console.log(valColor); // white
// получим значение выбранной (checked) радиокнопки
var valCheckedColor = $( "input[type=radio][name=color]:checked" ).val();
console.log(valCheckedColor); // green
</script>
Для получения значения выбранного элемента (select
, checkbox
, или radio
кнопок) используйте :checked
.
// получить значение выбранной опции select
$('select.color option:checked').val();
// получить значение выбранного select
$('select.size').val();
// получить значение отмеченного (checked) checkbox
$('input[type="checkbox"][name="answers"]:checked').val();
// получить значение установленной радиокнопки
$('input[type="radio"][name="rating"]:checked').val();
Если коллекции нет элементов, то метод val
возвращает значение undefined
.
Например, получим значение элемента textarea
, имеющего имя description
:
var valDescription = $('textarea[name="description"]').val();
if (valDescription !== undefined) {
console.log('Значение элемента textarea: ' + valDescription);
} else {
console.log('Элемент textarea с именем description на странице не найден!');
}
Получим значение элемента select
:
<select id="volume">
<option>16Gb</option>
<option>32Gb</option>
</select>
...
<script>
// получим значение выбранной опции элемента select
var volume = $('#volume').val();
// выведем это значение в консоль
console.log(volume);
// выведем значение в консоль при изменении select
$('#volume').change(function(){
var volume = $(this).val();
console.log(volume);
});
</script>
Если элемент select
имеет множественный выбор (атрибут multiple
), то метод val
возвратит в качестве результата массив, содержащий значение каждой выбранной опции (option
). Если ни одна опция не отмечена, то данный метод вернёт в качестве ответа пустой массив (до версии jQuery 3 значение null
).
<select id="brands" multiple="multiple">
<option selected="selected">Acer</option>
<option>Samsung</option>
<option selected="selected">Asus</option>
</select>
<script>
// var brands = $('#brands').val() || []; // до версии jQuery 3
var brands = $('#brands').val(); // для версии jQuery 3
// преобразуем массив в строку, используя разделитель ", "
var output = brands.join( ", " );
// выведем строку в консоль
console.log(output);
</script>
Установка значения элементу формы
Изменение значения элемента формы в jQuery осуществляется с помощью метода val
.
Например, при клике на кнопку установим элементу input
её текст:
<div>
<button>Кнопка 1</button>
<button>Кнопка 2</button>
<button>Кнопка 3</button>
</div>
<input type="text" value="Нажмите на кнопку!">
...
<script>
$('button').click(function() {
var text = $(this).text();
$('input').val(text);
});
</script>
Данный метод устанавливает значение для всех элементов набора, к которому он применяется.
Например, преобразуем все буквы значения элемента input
после потеря фокуса в прописные:
<input type="text" value="Некоторое значение поля">
...
<script>
$('input').on('blur', function() {
// установим значение полю
$(this).val(function(index, value) {
return value.toUpperCase();
});
});
</script>
Например, поменяем значение элемента select
:
<select name="color">
<option value="red">Красный</option>
<option value="green" selected>Зелёный</option>
<option value="blue">Синий</option>
</select>
<script>
// 1 вариант (установим в качестве значения select значение опции blue)
$('select[name="color"] option[value="blue"]').attr('selected', 'selected');
// 2 вариант
$('select[name="color"]').val('blue');
</script>
Например, присвоим значения элементу select
с множественным выбором (multiple
):
<select id="language" multiple="multiple">
<option value="english" selected="selected">Английский</option>
<option value="french">Французский</option>
<option value="spanish" selected="selected">Испанский</option>
<option value="china">Китайский</option>
</select>
...
<script>
$('#language').val(['french', 'china']);
</script>
Изменим, значение checkbox
:
<input type="checkbox" name="language" value="english"> Вы знаете английский
...
<script>
$('input[name="language"]').val('en');
</script>
You are looking for the text()
property:
$('a', 'div.c2').text();
The reason div.c2
is defined as the second argument is because it would then be the context
of the selector. By default jQuery searches the entire document when you use $()
, by specifying div.c2
it is only going to search inside of <div>
‘s with a class of c2.
Keeping this in mind, you could also rewrite the above like this:
$('div.c2 a').text();
Most people prefer this because it is the syntax that you would use to select this element in a CSS stylesheet. However, jQuery then has to figure that out. You could even do:
$('div.c2').find('a').text();
However, I prefer the context method as I feel it is cleaner and marginally faster, not that it matters.
There is also the html()
property, which gets the contents, including HTML.
So if your link was like this:
<a href='#'><b>Hi There</b></a>
Then:
$('a').text(); // would return Hi There
$('a').html(); // would return <b>Hi There</b>
Get the HTML contents of the first element in the set of matched elements or set the HTML contents of every matched element.
Contents:
-
.html()
- .html()
-
.html( htmlString )
- .html( htmlString )
- .html( function )
.html()Returns: String
Description: Get the HTML contents of the first element in the set of matched elements.
-
version added: 1.0.html()
-
This method does not accept any arguments.
-
This method is not available on XML documents.
In an HTML document, .html()
can be used to get the contents of any element. If the selector expression matches more than one element, only the first match will have its HTML content returned. Consider this code:
1 |
|
In order for the following <div>
‘s content to be retrieved, it would have to be the first one with class="demo-container"
in the document:
1 2 3 |
|
The result would look like this:
1 |
|
This method uses the browser’s innerHTML
property. Some browsers may not return HTML that exactly replicates the HTML source in an original document. For example, Internet Explorer sometimes leaves off the quotes around attribute values if they contain only alphanumeric characters.
Additional Notes:
-
By design, any jQuery constructor or method that accepts an HTML string — jQuery(), .append(), .after(), etc. — can potentially execute code. This can occur by injection of script tags or use of HTML attributes that execute code (for example,
<img onload="">
). Do not use these methods to insert strings obtained from untrusted sources such as URL query parameters, cookies, or form inputs. Doing so can introduce cross-site-scripting (XSS) vulnerabilities. Remove or escape any user input before adding content to the document.
Example:
Click a paragraph to convert it from html to text.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 |
|
Demo:
.html( htmlString )Returns: jQuery
Description: Set the HTML contents of each element in the set of matched elements.
-
version added: 1.0.html( htmlString )
-
htmlString
A string of HTML to set as the content of each matched element.
-
-
version added: 1.4.html( function )
-
function
A function returning the HTML content to set. Receives the
index position of the element in the set and the old HTML value as arguments.
jQuery empties the element before calling the function;
use the oldhtml argument to reference the previous content.
Within the function,this
refers to the current element in the set.
-
The .html()
method is not available in XML documents.
When .html()
is used to set an element’s content,
any content that was in that element is completely replaced by the new content.
Additionally, jQuery removes other constructs such as data and event
handlers from child elements before replacing those elements with the new content.
Consider the following HTML:
1 2 3 |
|
The content of <div class="demo-container">
can be set like this:
1 2 |
|
That line of code will replace everything inside <div class="demo-container">
:
1 2 3 |
|
As of jQuery 1.4, the .html()
method allows the HTML content to be set by passing in a function.
1 2 3 4 |
|
Given a document with six paragraphs, this example will set the HTML of <div class="demo-container">
to <p>All new content for <em>6 paragraphs!</em></p>
.
This method uses the browser’s innerHTML
property. Some browsers may not generate a DOM that exactly replicates the HTML source provided. For example, Internet Explorer prior to version 8 will convert all href
properties on links to absolute URLs, and Internet Explorer prior to version 9 will not correctly handle HTML5 elements without the addition of a separate compatibility layer.
To set the content of a <script>
element, which does not contain HTML, use the .text()
method and not .html()
.
Note: In Internet Explorer up to and including version 9, setting the text content of an HTML element may corrupt the text nodes of its children that are being removed from the document as a result of the operation. If you are keeping references to these DOM elements and need them to be unchanged, use .empty().html( string )
instead of .html(string)
so that the elements are removed from the document before the new string is assigned to the element.
Examples:
Add some html to each div.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 |
|
Demo:
Add some html to each div then immediately do further manipulations to the inserted html.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 |
|
Demo:
Как получить содержимое тегов и атрибутов с помощью методов jQuery.
1
.html()
Получает HTML-содержимое.
<div class="box">
<p>Item 1</p>
<p>Item 2</p>
<p>Item 3</p>
</div>
HTML
Результат:
<p>Item 1</p>
<p>Item 2</p>
<p>Item 3</p>
2
.text()
Получает текстовое содержимое.
<div class="box">
<p>Item 1</p>
<p>Item 2</p>
<p>Item 3</p>
</div>
HTML
Результат:
Item 1
Item 2
Item 3
3
.attr()
Получает значение любого атрибута.
<a class="btn" href="http://site.ru">Link</a>
HTML
$('.btn').attr('href');
JS
Результат:
http://site.ru
4
.val()
Получает значение атрибута value="..."
у полей форм.
<input class="field" type="text" name="email" value="mail@site.ru">
HTML
Результат:
mail@site.ru
5
.data()
.data("name")
– получает значение data-name="..."
, краткая форма .attr('data-name')
.
<input class="field" type="text" name="email" value="mail@site.ru" data-name="123">
HTML
$('.field').data('name');
JS
Результат:
123
6
.css()
.css('название_свойства')
– получает конечное значение CSS-свойства.
<div class="text" style="color: orange;">Text</div>
<style>
.text {
font-size: 20px;
boreder: 1px silid #000;
}
</style>
HTML
$('.text').css('font-size');
$('.text').css('color');
$('.text').css('boreder');
JS
Результат:
20px
orange
1px silid #000
Бывают ситуации, что нужно получить внутреннее содержимое элемента (тэга) на странице.
К примеру,
<!DOCTYPE html> <html> <head> </head> <body> <div id="elem"><p>Содержимое блока.</p></div> </body> </html>
Нужно во всплывающем окне вывести информацию, которая написана внутри элемента div с id=”elem”.
Как это можно сделать?
Здесь есть 2 варианта.
1 вариант. Вам нужно получить html-код, который находится внутри элемента.
В этом случае нужно воспользоваться методом html().
селектор.html();
В исходный пример нужно внести совсем небольшие изменения:
<!DOCTYPE html> <html> <head> <script src="http://code.jquery.com/jquery-1.9.1.js"></script> </head> <body> <div id="elem">Содержимое блока.</div> <script type="text/javascript"> alert($("#elem").html()); </script> </body> </html>
Окно с таким содержимым мы получим в результате.
Обратите внимание, что все тэги, которые были внутри элемента, тоже будут выведены.
2 вариант. Вам нужно получить только текстовое содержимое.
Для этого нужно внести очень небольшое изменение в скрипт: вместо метода html() воспользоваться методом text().
селектор.text();
Вот, как это будет выглядеть:
<script type="text/javascript"> alert($("#elem").text()); </script>
В результате, в окне будет выведен только текст и все теги будут проигнорированы:
Хочу сказать, что на практике пользоваться такими методами приходится очень часто, поэтому имейте их в виду и применяйте по месту.
Все мои уроки по Javascript здесь.
- Комментарии