jQuery | método de texto()

Este método se utiliza para establecer o devolver el contenido de texto del elemento. Mientras establece el contenido, sobrescribe el contenido de todos los elementos coincidentes. El contenido devuelto del método de texto() se usa para devolver el contenido de texto de todos los elementos coincidentes.

Sintaxis:

  • Sintaxis del texto de retorno:
    $(selector).text()
  • Establecer la sintaxis del texto:
    $(selector).text(content)
  • Establecer texto usando una función:
    $(selector).text(function(index, currentcontent))

Valores de propiedad:

  1. Contenido requerido: se utiliza para establecer el nuevo contenido de texto para el elemento.
  2. Función (índice, contenido actual): se utiliza para especificar una función que devolverá el nuevo contenido de texto para los elementos seleccionados.
    • index : Devuelve la posición de índice del elemento.
    • currentcontent : Devuelve el contenido actual del elemento.

Ejemplo-1: Establecer sintaxis de texto.

<!DOCTYPE html>
<html>
  
<body>
    <h1>
      <center>
    Geeks <button onclick="function()">Click me
        </button>
      </center>
  </h1>
  
    <script src=
"https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js">
  </script>
    <script>
        $(document).ready(function() {
            $("button").click(function() {
                $("p").text("Jquery_text_method");
            });
        });
    </script>
  
    <p>GeeksforGeeks</p>
    <p>Jquery</p>
  
</body>
  
</html>

Producción:

Antes de hacer clic en el botón:

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

Ejemplo-2: Sintaxis de texto de retorno.

<!DOCTYPE html>
<html>
  
<body>
    <h1>
      <center>
     Geeks <button onclick="function()">Click me
        </button>
      </center> 
  </h1>
  
    <script src=
"https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js">
  </script>
    <script>
        $(document).ready(function() {
            $("button").click(function() {
                alert($("p").text());
            });
        });
    </script>
  
    <p>GeeksforGeeks</p>
    <p>Jquery</p>
  
</body>
  
</html>

Producción:

Antes de hacer clic en el botón:

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

Ejemplo-3: Establecer texto usando una función.

<!DOCTYPE html>
<html>
  
<body>
    <h1>
      <center>
      Geeks <button onclick="function()">Click me
        </button>
      </center>
  </h1>
    <script 
src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js">
  </script>
    
    <script>
        $(document).ready(function() {
            $("button").click(function() {
                $("p").text(function(n) {
                return "Index No. of Element: " + n;
                });
            });
        });
    </script>
    
    <p>GeeksforGeeks</p>
    <p>Jquery_textmethod()</p>
  
</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 riarawal99 y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA

Deja una respuesta

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *