JQuery | Изменить текст элемента span

Опубликовано: 18 Декабря, 2021

Учитывая документ HTML, и задача состоит в том, чтобы изменить текстовое содержимое элемента <span>. Существуют различные методы, используемые для изменения элементов диапазона, которые обсуждаются ниже:

Метод jQuery text (): этот метод устанавливает / возвращает текстовое содержимое указанных элементов. Если этот метод используется для возврата содержимого, он возвращает текстовое содержимое всех совпавших элементов (теги HTML будут удалены). Если этот метод используется для установки содержимого, он перезаписывает содержимое всех совпадающих элементов.
Синтаксис:
- Он возвращает текстовое содержимое.
```
 $ (селектор) .text ()
```
- Устанавливает текстовое содержимое.
```
 $ (селектор) .text (контент)
```
- Установите текстовое содержимое с помощью функции.
```
 $ (селектор) .text (функция (индекс, curContent))
```
Параметры:
- содержание: обязательный параметр. Он определяет новое текстовое содержимое для выбранных элементов.
- function (index, curContent): необязательный параметр. Он определяет функцию, которая возвращает новое текстовое содержимое для выбранных элементов.
- index: возвращает позицию индекса элемента в наборе.
- curContent: возвращает текущее содержимое выбранных элементов.
Метод jQuery html (): этот метод устанавливает / возвращает содержимое (HTML) указанных элементов. Если этот метод используется для возврата содержимого, он возвращает содержимое первого совпадающего элемента. Если этот метод используется для установки содержимого, он перезаписывает содержимое всех совпадающих элементов.
Синтаксис:
- Вернуть контент
```
$ (селектор) .html ()
```
- Установить контент
```
$ (селектор) .html (контент)
```
- Установить контент с помощью функции
```
$ (селектор) .html (функция (индекс, curContent))
```
Параметры:
- содержание: обязательный параметр. Он определяет новое текстовое содержимое для выбранных элементов, содержащих теги HTML.
- function (index, curContent): необязательный параметр. Он определяет функцию, которая возвращает новое содержимое для выбранных элементов.
- index: возвращает позицию индекса элемента в наборе.
- curContent: возвращает текущее HTML-содержимое выбранных элементов.

Пример 1. В этом примере содержимое изменяется с помощью метода JQuery text () .

 <!DOCTYPE HTML>
 < html >
    < head >
        < title >
            JQuery | Change the text of a span element
        </ title >
         
        < script src =
 " https://ajax.googleapis.com/ajax/libs/jquery/3.4.0/jquery.min.js " >
        </ script >
    </ head >
     
    < body style = "text-align:center;" id = "body" >
         
        < h1 style = "color:green;" >
            GeeksForGeeks
        </ h1 >
         
        < span id = "GFG_Span" style = "font-size: 15px; font-weight: bold;" >
            This is text of Span element.
        </ span >
         
        < br >< br >
         
        < button >
            Change
        </ button >
         
        < p id = "GFG_DOWN" style =
            "color:green; font-size: 20px; font-weight: bold;" >
        </ p >
         
        < script >
            $('button').on('click', function() {
                $('#GFG_Span').text("New Span text content");
                $('#GFG_DOWN').text("Span content changed");
            });
        </ script >
    </ body >
 </ html > 

Выход:

Перед нажатием на кнопку:
После нажатия на кнопку:

Пример 2: В этом примере содержимое изменяется с помощью метода JQuery html () .

 <!DOCTYPE HTML>
 < html >
    < head >
        < title >
            JQuery | Change the text of a span element
        </ title >
         
        < script src =
 " https://ajax.googleapis.com/ajax/libs/jquery/3.4.0/jquery.min.js " >
        </ script >
    </ head >
     
    < body style = "text-align:center;" id = "body" >
         
        < h1 style = "color:green;" >
            GeeksForGeeks
        </ h1 >
         
        < span id = "GFG_Span" style = "font-size: 15px; font-weight: bold;" >
             This is text of Span element.
        </ span >
         
        < br >< br >
         
        < button >
            Change
        </ button >
         
        < p id = "GFG_DOWN" style =
            "color:green; font-size: 20px; font-weight: bold;" >
        </ p >
         
        < script >
            $('button').on('click', function() {
                $('#GFG_Span').html("< p >New Span text content</ p >");
                $('#GFG_DOWN').text("Span content changed");
            });
        </ script >
    </ body >
 </ html > 

Выход:

Перед нажатием на кнопку:
После нажатия на кнопку:

Вопросы о Web технологиях

JQuery | Изменить текст элемента span

РЕКОМЕНДУЕМЫЕ СТАТЬИ