Método html
El método html permite cambiar el texto
de un elemento y obtenerlo junto con las etiquetas.
Sintaxis
Obtener el texto:
$(selector).html();
Cambiar el texto:
$(selector).html(nuevo texto);
Adicional
El método html puede aplicar una función
determinada a cada elemento del conjunto.
Como primer parámetro, la función recibirá
el índice del elemento en el conjunto, y como segundo parámetro
- el texto actual del elemento:
$(selector).html(function(índice en el conjunto, texto actual del elemento));
Los nombres de las variables en la función pueden ser cualesquiera.
Por ejemplo, si para el primer parámetro le damos el nombre
index - entonces dentro de nuestra función estará disponible
la variable index, que contendrá el índice en
el conjunto para el elemento que la función está procesando
en ese momento. De manera similar, si para el segundo
parámetro le damos, por ejemplo, el nombre value - entonces
dentro de nuestra función estará disponible la variable value,
que contendrá el texto del elemento que la función
está procesando en ese momento:
$(selector).html(function(index, value) {
// aquí están disponibles las variables index y value
});
El texto de cada elemento cambiará por aquel que la función devuelva específicamente para ese elemento.
Ejemplo
Mostremos el contenido de nuestro párrafo:
<p id="test">text</p>
let text = $('#test').html();
alert(text);
Ejemplo
Cambiemos el contenido de nuestro párrafo:
<p id="test">text1</p>
$('#test').html('text2');
El código HTML quedará así:
<p id="test">text2</p>
Ejemplo
Cambiemos el contenido de nuestro párrafo a texto con etiquetas:
<p id="test">text1</p>
$('#test').html('<span>text2</span>');
El código HTML quedará así:
<p id="test"><span>text2</span></p>
Ejemplo
Añadamos al final de cada párrafo su número de orden en el conjunto:
<p>text</p>
<p>text</p>
<p>text</p>
$('p').html(function(index, value){
return value + ' ' + index;
});
El código HTML quedará así:
<p>text 0</p>
<p>text 1</p>
<p>text 2</p>
Véase también
-
el método
text,
que permite obtener el texto del elemento sin etiquetas -
La propiedad JavaScript
innerHTML,
con la que se puede cambiar el texto de un elemento en JavaScript puro -
La propiedad JavaScript
outerHTML,
con la que se puede cambiar el texto de un elemento junto con su etiqueta en JavaScript puro
