Obtener contenido: para obtener el contenido del objeto DOM, existen tres métodos simples. Métodos jQuery para la manipulación DOM 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 de los elementos seleccionados, incluido el marcado HTML.
- val(): se utiliza para establecer o devolver el valor de los campos de formulario.
Ejemplo: este ejemplo utiliza el método de contenido de texto para obtener el contenido.
<!DOCTYPE html>
<html>
<head>
<title>jQuery Get 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 Get Content</h2>
<button id="btn1">Text</button>
<button id="btn2">HTML</button>
<!-- Script to get the content -->
<script>
$(document).ready(function(){
$("#btn1").click(function(){
alert("Text: " + $("#GFG2").text());
});
$("#btn2").click(function(){
alert("HTML: " + $("#GFG1").html());
});
});
</script>
</body>
</html>
Producción:
- Antes de hacer clic en el botón:
- Después de hacer clic en el botón Texto:
- Después de hacer clic en el botón Html:
Obtener atributos El método jQuery attr() se utiliza para obtener valores de atributos de objetos DOM.
Ejemplo: este ejemplo utiliza el método attr() para obtener el valor del atributo.
<!DOCTYPE html>
<html>
<head>
<title>jQuery Get 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 Get Attributes</h2>
<button id="btn1">Click</button>
<br><br>
<h3>
<a href="https://geeksforgeeks.org" id="GFG">
geeksforgeeks.org
</a>
</h3>
<!-- Script to get the attribute value -->
<script>
$(document).ready(function(){
$("button").click(function(){
alert($("#GFG").attr("href"));
});
});
</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 SHUBHAMSINGH10 y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA