JQuery | Cambiar el texto de un elemento span

Dado un documento HTML y la tarea es cambiar el contenido de texto de un elemento <span>. Hay varios métodos utilizados para cambiar los elementos de tramo que se analizan a continuación:

Método jQuery text(): este método establece/devuelve el contenido de texto de los elementos especificados. Si se utiliza este método para devolver contenido, devolverá el contenido de texto de todos los elementos coincidentes (se eliminarán las etiquetas HTML). Si se utiliza este método para establecer el contenido, sobrescribe el contenido de todos los elementos coincidentes.
Sintaxis:
- Devuelve el contenido del texto.
```
$(selector).text()
```
- Establece el contenido del texto.
```
$(selector).text(content)
```
- Establece el contenido del texto usando una función.
```
$(selector).text(function(index, curContent))
```
Parámetros:
- contenido: Es un parámetro obligatorio. Especifica el nuevo contenido de texto para los elementos seleccionados.
- function(index, curContent): Es un parámetro opcional. Especifica la función que devuelve el nuevo contenido de texto para los elementos seleccionados.
- índice: Devuelve la posición de índice del elemento en el conjunto.
- curContent: Devuelve el contenido actual de los elementos seleccionados.
Método jQuery html(): este método establece/devuelve el contenido (HTML) de los elementos especificados. Si este método se usa para devolver contenido, devuelve el contenido del primer elemento coincidente. Si se utiliza este método para establecer el contenido, sobrescribe el contenido de todos los elementos coincidentes.
Sintaxis:
- Devolver contenido
```
$(selector).html()
```
- Establecer contenido
```
$(selector).html(content)
```
- Establecer contenido usando una función
```
$(selector).html(function(index, curContent))
```
Parámetros:
- contenido: Es un parámetro obligatorio. Especifica el nuevo contenido de texto para los elementos seleccionados que contienen las etiquetas HTML.
- function(index, curContent): Es un parámetro opcional. Especifica la función que devuelve el nuevo contenido para los elementos seleccionados.
- índice: Devuelve la posición de índice del elemento en el conjunto.
- curContent: Devuelve el contenido HTML actual de los elementos seleccionados.

Ejemplo 1: Este ejemplo cambia el contenido usando el método text() de JQuery .

<!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>

Producción:

Antes de hacer clic en el botón:
Después de hacer clic en el botón:

Ejemplo 2: Este ejemplo cambia el contenido usando el método html() de JQuery .

<!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>

Producción:

Antes de hacer clic en el botón:
Después de hacer clic en el botón:

Publicación traducida automáticamente

Artículo escrito por PranchalKatiyar y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA

Deja una respuesta Cancelar la respuesta