Как заменить / изменить содержимое HTML элементов с помощью jQuery - Web-Global: Связывая миры через веб-технологии
Web-Global

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

Пост опубликован 19 ноября 2021 в 09:12 и находится в рубриках Jquery. 485
Поделиться:

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().

  1. var data = $(«#blockIdOne»).html();
  2. console.log(data);

Если мы применим метод с параметром, то вместо получение содержимого, содержимое элемента будет изменен. Ниже приведен синтаксис метода с параметром.

Синтаксис метода html() с параметром
.html(content)Присваивает переданный HTML-фрагмент всем элементам набора в качестве содержимого.
Параметрыcontent — (Строка | Функция) HTML-фрагмент, который будет присвоен всем элементам набора в качестве содержимого. Если это функция, то она будет вызвана для каждого элемента набора, причем сам элемент будет передан в нее в виде контекста функции (this). Функция принимает два значения: индекс элемента и его содержимое, а возвращаемое ею значение используется как новое содержимое элемента.
ВозвращаетКоллекцию jQuery

Ниже приведен пример использование метода html() с параметром, который заменит содержимое HTML элемента.

  1. $(«#hello»).html(«<strong>Lorem ipsum</strong><br> dolor sit amet»);

После выполнение данного кода мы заменим содержимое элемента на то, что указан в качестве параметра метода. В данном случае теги указанные в параметре будут работать на странице как HTML разметка.

Выше мы узнали, что можно получить и изменить HTML содержимое элемента, но мы кроме этого можем получить текстовое содержимое элемента или изменить / заменить его. Для этого мы можем использовать метод .text().

Пример использование метода text() для получение текстового содержимое элемента:

  1. var data = $(«#blockIdOne»).text();
  2. console.log(data);

Пример использование метода text() для замена текстового содержимое элемента:

  1. $(«#blockIdOne»).text(«hello hello hello»);
$(document).ready(function () {
      $("#text_mob").html("Виды работы");
    });