¿Cómo cambiar el texto de un botón usando jQuery?

Aquí está la pregunta para cambiar el texto de un botón usando jQuery. Para realizar esta tarea, podemos utilizar los siguientes dos métodos:

Método prop(): se utiliza para establecer valores de propiedad, establece una o más propiedades para los elementos seleccionados.

Sintaxis:

$(selector).prop(para1, para2)

Acercarse:

Obtenga el texto del elemento <input>.
El PRIMER elemento emparejado se toma sobre la base del párrafo 1.
Cambie el valor establecido para el elemento seleccionado de para1 a para2.

Ejemplo:

<!DOCTYPE html>
<html>
  
<head>
    <title>
      Change the Text of a Button using jQuery
  </title>
    <script src=
"https://code.jquery.com/jquery-1.12.4.min.js">
  </script>
</head>
  
<body style="text-align:center;">
    <h1 style="color:green;"> 
        GeeksForGeeks 
    </h1>
    <h3>Change the Text of a Button using jQuery</h3>
    <p>
      Click on button to change text
      from "Click" to "Prop Click"
  </p>
    <input type="button" id="Geeks" value="Click">
    <script>
        $(document).ready(function() {
            $("input").click(function() {
                // Change text of input button
                $("#Geeks").prop("value", "Prop Click");
            });
        });
    </script>
</body>
  
</html>

Salida:
Antes de hacer clic en el botón:

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

El método html(): Establece o devuelve el contenido (innerHTML) de los elementos seleccionados.

Sintaxis:

$(selector).html(content)

Acercarse:

Obtenga el texto del elemento <button>.
Coincide con el elemento selector.
Cambie el valor establecido para el elemento seleccionado a contenido.

Ejemplo:

<!DOCTYPE html>
<html>
  
<head>
    <title>How to Change the Text of a 
      Button using jQuery?</title>
    <script src=
            "https://code.jquery.com/jquery-1.12.4.min.js">
  </script>
</head>
  
<body style="text-align:center;">
    <h1 style="color:green;"> 
        GeeksForGeeks 
    </h1>
    <h3>How to Change the Text of a Button using jQuery?</h3>
    <p>Click on button to change text 
      from "Click" to "Html Click"</p>
    <button type="button" id="Geeks">Click</button>
    <script>
        $(document).ready(function() {
            $("button").click(function() {
                // Change text of button element
                $("#Geeks").html("Html Click");
            });
        });
    </script>
</body>
  
</html>

Salida:
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 SHUBHAMSINGH10 y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA

Deja una respuesta Cancelar la respuesta