Establecer contenido: se utiliza para establecer el contenido mediante jQuery. Los siguientes métodos se utilizan para establecer el contenido que se enumeran a continuación:
- text(): se utiliza para establecer o devolver el contenido de texto de los elementos seleccionados.
- html(): se utiliza para establecer o devolver el contenido HTML interno del elemento seleccionado.
- val(): este parámetro se usa para establecer o devolver el valor del atributo para los elementos seleccionados. Este método se aplica a los elementos del formulario HTML.
Ejemplo: este ejemplo utiliza el método de configuración de contenido (método text(), html() y val()) para configurar el contenido.
<!DOCTYPE html> <html> <head> <title>jQuery Set Content</title> <script src= "https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"> </script> </head> <body style="text-align:center;"> <h1 id="GFG1" style = "color:green;"> GeeksForGeeks </h1> <h2 id="GFG2">jQuery Set Content</h2> <p>Full Form: <input type="text" id="GFG3" value="GFG"></p> <button id="btn1">Set 1 line</button> <button id="btn2">Set 2 line</button> <button id="btn3">Set 3 line</button> <!-- Script to set the content --> <script> $(document).ready(function() { $("#btn1").click(function() { $("#GFG1").text("GEEKSFORGEEKS"); }); $("#btn2").click(function() { $("#GFG2").html("<b>Set Content</b>"); }); $("#btn3").click(function() { $("#GFG3").val("GeeksForGeeks"); }); }); </script> </body> </html>
Producción:
- Antes de hacer clic en el botón:
- Después de hacer clic en el botón Establecer 1 línea:
- Después de hacer clic en el botón Establecer 2 líneas:
- Después de hacer clic en el botón Establecer 3 líneas:
Establecer atributos: el método jQuery attr() en jQuery se usa para establecer y cambiar los valores de los atributos.
Ejemplo: este ejemplo utiliza el método attr() para establecer y cambiar los valores de los atributos.
<!DOCTYPE html> <html> <head> <title>jQuery Set Attributes</title> <script src= "https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"> </script> </head> <body style="text-align:center;"> <h1 style="color:green;"> GeeksForGeeks </h1> <h2>jQuery Set Attributes</h2> <button id="btn1">Click</button> <br><br> <h3> <a href="https://geeksforgeeks.org" id="GFG"> geeksforgeeks.org </a> </h3> <!-- Script to use set attribute method --> <script> $(document).ready(function() { $("button").click(function() { $("#GFG").attr("href", "https://www.geeksforgeeks.org/jquery-introduction/"); }); }); </script> </body> </html>
Producción:
- Antes de hacer clic en el enlace:
- Haga clic en el enlace antes de hacer clic en el botón:
- Haga clic en el enlace 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