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
=
</
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
=
</
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