Содержимое статьи:
- Получение и замена HTML содержимое элемента — html()
- Получение и замена текстового содержимое элемента — text()
jQuery представляет два метода, с помощью которых можно получить или изменить содержимое HTML элементов. Первый метод — это html(). Если мы применим метод без параметров, то мы получим содержимое элемента в формате HTML.
| Синтаксис метода html() без параметров | ||||
|---|---|---|---|---|
| .html() | Возвращает HTML-содержимое первого элемента из набора | |||
| Параметры | Отсутствуют. | |||
| Возвращает | Содержимое первого элемента набора (HTML и текст). | |||
Давайте посмотрим на примере. У нас на странице ест блочный элемент div, который имеет атрибут id с значением blockIdOne. У нас есть задача получить содержимое (с тегами и текстами) данного элемента.
<!DOCTYPE html>
<html lang="ru">
<head>
<meta charset="UTF-8">
<title>jQuery</title>
</head>
<body>
<div id="blockIdOne">
<p class="one">Первый параграф первого дива</p>
<p class="two">Второй параграф первого дива</p>
<div class="myBlock">
<p id="hello">Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>
</div>
</div>
<script src="https://code.jquery.com/jquery-3.2.1.min.js" integrity="sha256-hwg4gsxgFZhOsEEamdOYGBf13FyQuiTwlAQgxVSNgt4=" crossorigin="anonymous"></script>
</body>
</html>
Выбираем конкретный элемент, содержимое которого хотим получить используя метод html().
var data = $("#blockIdOne").html();
console.log(data);
Если мы применим метод с параметром, то вместо получение содержимого, содержимое элемента будет изменен. Ниже приведен синтаксис метода с параметром.
| Синтаксис метода html() с параметром | ||||
|---|---|---|---|---|
| .html(content) | Присваивает переданный HTML-фрагмент всем элементам набора в качестве содержимого. | |||
| Параметры | content — (Строка | Функция) HTML-фрагмент, который будет присвоен всем элементам набора в качестве содержимого. Если это функция, то она будет вызвана для каждого элемента набора, причем сам элемент будет передан в нее в виде контекста функции (this). Функция принимает два значения: индекс элемента и его содержимое, а возвращаемое ею значение используется как новое содержимое элемента. | |||
| Возвращает | Коллекцию jQuery | |||
Ниже приведен пример использование метода html() с параметром, который заменит содержимое HTML элемента.
$("#hello").html("<strong>Lorem ipsum</strong><br> dolor sit amet");
После выполнение данного кода мы заменим содержимое элемента на то, что указан в качестве параметра метода. В данном случае теги указанные в параметре будут работать на странице как HTML разметка.
Выше мы узнали, что можно получить и изменить HTML содержимое элемента, но мы кроме этого можем получить текстовое содержимое элемента или изменить / заменить его. Для этого мы можем использовать метод .text().
Пример использование метода text() для получение текстового содержимое элемента:
var data = $("#blockIdOne").text();
console.log(data);
Пример использование метода text() для замена текстового содержимое элемента:
$("#blockIdOne").text("hello hello hello");
Комментарии