Dado un documento HTML y la tarea es obtener el texto de una etiqueta <span> usando JQuery.
Método 1: Uso de jQuery text() Método : Este método se usa para establecer o devolver el contenido de texto de elementos específicos. Si se utiliza este método para devolver contenido, devolverá el contenido de texto de todos los elementos coincidentes (se eliminarán las etiquetas HTML). Si se utiliza este método para establecer el contenido, sobrescribe el contenido de todos los elementos coincidentes.
Sintaxis:
- Devolver contenido de texto:
$(selector).text()
- Establecer contenido de texto:
$(selector).text(content)
- Establecer contenido de texto usando una función:
$(selector).text(function(index, curContent))
Parámetros:
- contenido: Es un parámetro obligatorio. Especifica el nuevo contenido de texto para los elementos seleccionados.
- function(index, curContent): Es un parámetro opcional. Especifica la función que devuelve el nuevo contenido de texto para los elementos seleccionados.
- índice: Devuelve la posición de índice del elemento en el conjunto.
- curContent: Devuelve el contenido actual de los elementos seleccionados.
Ejemplo: este ejemplo obtiene el contenido usando el método text() de JQuery .
<!DOCTYPE HTML>
<html>
<head>
<title>
JQuery | Get the text of a span element
</title>
<script src =
"https://ajax.googleapis.com/ajax/libs/jquery/3.4.0/jquery.min.js">
</script>
</head>
<body style = "text-align:center;" id = "body">
<h1 style = "color:green;" >
GeeksForGeeks
</h1>
<span id="GFG_Span" style = "font-size: 15px; font-weight: bold;">
This is text of Span element.
</span>
<br><br>
<button>
Click Here
</button>
<p id="GFG_DOWN" style="color:green;font-size:20px;font-weight:bold;">
</p>
<script>
$('button').on('click', function() {
var $val = $('#GFG_Span').text();
$('#GFG_DOWN').text($val);
});
</script>
</body>
</html>
Producción:
- Antes de hacer clic en el botón:
- Después de hacer clic en el botón:
Método 2: Uso de jQuery html() Método : este método establece o devuelve el contenido (HTML) de los elementos especificados. Si este método se usa para devolver contenido, devuelve el contenido del primer elemento coincidente. Si se utiliza este método para establecer el contenido, sobrescribe el contenido de todos los elementos coincidentes.
Sintaxis:
- Contenido devuelto:
$(selector).html()
- Establecer contenido:
$(selector).html(content)
- Establecer contenido usando una función:
$(selector).html(function(index, curContent))
Parámetros:
- contenido: Este parámetro es obligatorio. Especifica el nuevo contenido de texto para los elementos seleccionados que contienen las etiquetas HTML.
- function(index, curContent): Este parámetro es opcional. Especifica una función que devuelve el nuevo contenido para los elementos seleccionados.
- índice: Devuelve la posición de índice del elemento en el conjunto.
- curContent: Devuelve el contenido HTML actual de los elementos seleccionados.
Ejemplo: Este ejemplo obtiene el contenido usando el método html() de JQuery .
<!DOCTYPE HTML>
<html>
<head>
<title>
JQuery | Get the text of a span element.
</title>
<script src =
"https://ajax.googleapis.com/ajax/libs/jquery/3.4.0/jquery.min.js">
</script>
</head>
<body style = "text-align:center;" id = "body">
<h1 style = "color:green;" >
GeeksForGeeks
</h1>
<span id="GFG_Span" style="font-size:15px; font-weight:bold;">
This is text of Span element.
</span>
<br><br>
<button>
Click Here
</button>
<p id="GFG_DOWN" style="color:green; font-size:20px; font-weight:bold;">
</p>
<script>
$('button').on('click', function() {
var $val = $('#GFG_Span').html();
$('#GFG_DOWN').text($val);
});
</script>
</body>
</html>
Producción:
- Antes de hacer clic en el botón:
- Después de hacer clic en el botón:
jQuery es una biblioteca JavaScript de código abierto que simplifica las interacciones entre un documento HTML/CSS. Es muy famosa por su filosofía de «Escribir menos, hacer más» .
Puede aprender jQuery desde cero siguiendo este tutorial de jQuery y ejemplos de jQuery .
Publicación traducida automáticamente
Artículo escrito por PranchalKatiyar y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA