Как заменить / изменить содержимое HTML элементов с помощью jQuery

Как заменить / изменить содержимое HTML элементов с помощью jQuery
5 (100%) 6 votes

Содержимое статьи:

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");

Об авторе

Занимаюсь программированием уже более 7 лет. Часто использую JavaScript (Node.js) и Python. Хобби - Квантовая механика и нейронные сети.

Комментарии