Метод 1: использование метода text()
Метод text() — это простой способ изменить текстовое содержимое тега span. Он заменяет существующий текст указанным содержимым.
// HTML: <span id="mySpan">Original Text</span>
// jQuery code
$('#mySpan').text('New Text');
Метод 2: использование метода html()
Метод html() позволяет изменять текстовое содержимое тега span, одновременно поддерживая разметку HTML. Это полезно, когда вам нужно добавить форматированный или стилизованный текст внутри диапазона.
// HTML: <span id="mySpan">Original Text</span>
// jQuery code
$('#mySpan').html('<em>New Text</em>');
Метод 3: использование метода text() или html() с функцией
Оба метода text() и html() также могут принимать функцию в качестве аргумента. Эта функция получает индекс и текущее содержимое диапазона в качестве параметров и возвращает новое содержимое.
// HTML: <span id="mySpan">Original Text</span>
// jQuery code using text() method with a function
$('#mySpan').text(function(index, oldText) {
return 'New Text';
});
// jQuery code using html() method with a function
$('#mySpan').html(function(index, oldHTML) {
return '<em>New Text</em>';
});
Метод 4. Использование метода replaceWith()
Метод replaceWith() заменяет весь тег span, включая его содержимое, новым HTML или текстом.
// HTML: <span id="mySpan">Original Text</span>
// jQuery code to replace span with text
$('#mySpan').replaceWith('New Text');
// jQuery code to replace span with HTML
$('#mySpan').replaceWith('<em>New Text</em>');
Метод 5: использование методаcontent()
Методcontent() извлекает все дочерние узлы диапазона, включая текстовые узлы, и позволяет вам изменять их.
// HTML: <span id="mySpan">Original Text</span>
// jQuery code to change the text using contents() method
$('#mySpan').contents().filter(function() {
return this.nodeType === 3; // Select only text nodes
}).replaceWith('New Text');
Не забывайте использовать соответствующие методы в зависимости от ваших конкретных потребностей, хотите ли вы заменить текст, включить HTML-разметку или применить более сложные изменения. jQuery предоставляет мощный и эффективный способ взаимодействия с тегами span и улучшения взаимодействия с пользователем в Интернете.