Jquery как изменить содержимое тега

Статья, в которой рассмотрим, какие в 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">
  &lt;p&gt;Другой контент...&lt;/p&gt;
</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>

Библиотека jQuery обладает целым набором отличных методов для изменения HTML. В этой статье рассмотрим часть из наиболее востребованных.

Чтение и изменение содержания тегов (html)

Метод html позволяет изменять или считывать содержание тегов. Если предать ему параметр, то произойдёт замена содержание тега не переданное значение. Если параметр не передавать, то произойдёт считывание. Продемонстрируем обе эти функции:

<div id="mouse">Тише, мыши, кот на крыше</div>
<script>
   var a = $('#mouse').html();
   console.log( a ); // вернёт "Тише, мыши, кот на крыше"
   $('#mouse').html('Тише, мыши, <b>сыр</b> на крыше');
</script>

В этом примере в первом случае использования метода html не передаётся никакого параметра в скобках. Поэтому метод возвращает HTML содержание элемента. Во втором случае ему передаётся строка с HTML тегом. Эта строка заменяет содержание элемента. В итоге на странице получится такой HTML код:

<div id="mouse">Тише, мыши, <b>сыр</b> на крыше</div>

Оборачивание элементов в HTML теги (wrap, wrapAll)

Метод wrap позволяет оборачивать элементы в выбранный тег. В параметре этого метода можно написать как название тега, в который надо обернуть (к примеру wrap(‘div’)), так и код тега полностью (к примеру wrap(‘<div></div>’)). Во втором случае можно задать ещё и атрибуты для тега-обёртки, к примеру класс или стиль: wrap(‘<div class=»test»></div>’). Продемонстрируем оба способа:

<span id="mouse">Тише, мыши, кот на крыше</span>
<span id="cat">А котята ещё выше</span>
<script>
   $('#mouse').wrap('div');
   $('#cat').wrap(<div class="test"></div>);
</script>

В итоге получится такой HTML код:

<div><span id="mouse">Тише, мыши, кот на крыше</span></div>
<div class="test"><span id="cat">А котята ещё выше</span></div>

Если понадобится обернуть не каждый элемент отдельно, а оба элемента в один тег, то можно воспользоваться методом wrapAll. Но для этого надо использовать тот селектор, который будет подходить к нескольким элементам. К примеру, сгруппируем по одному классу несколько элементов:

<span class="mouse">Тише, мыши, кот на крыше</span>
<span class="mouse">А котята ещё выше</span>
<script>
   $('.mouse').wrapAll('div');
</script>

Получится такое обрамление

<div>
   <span class="mouse">Тише, мыши, кот на крыше</span>
   <span class="mouse">А котята ещё выше</span>
</div>

При выполнении метода wrapAll необходимо учитывать что если между выбираемыми элементами окажутся сторонние, которые не подходят под условие, то они будут принудительно передвинуты и окажутся после обёрнутого набора.

Удаление элементов или содержимого (remove, empty)

Иногда появляется необходимость не просто скрыть элемент, а совсем удалить его со страницы. Для этого можно использовать метод remove. Попробуем с помощью этого метода удалить из предыдущего примера первый тег:

<span class="mouse">Тише, мыши, кот на крыше</span>
<span class="cat">А котята ещё выше</span>
<script>
   $('.mouse').remove();
</script>

В результате будет удалён элемент, у которого class=»mouse»:

<span class="cat">А котята ещё выше</span>

Существует метод empty, который удаляет содержимое элемента. То есть этот метод работает точно так же, как если если использовать метод html(»), у которого в скобках стоит строка с нулевой длиной (то есть кавычки открываются и сразу закрываются:

<div id="mouse">Тише, мыши, кот на крыше</div>
<script>
   $('#mouse').empty();
</script>

Результат выполнения этого кода будет будет таким:

<div id="mouse"></div>

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

• Получение и замена HTML содержимое элемента — html()
• Получение и замена текстового содержимое элемента — text()

jQuery представляет два метода, с помощью которых можно получить или изменить содержимое 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 элемента.

$("#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");