1

Quisiera saber la diferencia entre dos métodos o funcionalidades de jQuery que pueden llegar a confusión en mi caso, incluso leyendo la API de ambas utilidades como pueden ser:

  • .text()
  • .html()

Según w3s, .text() coloca y retoca un valor en un atributo o etiqueta de nuestro HTML; y html() coloca y retorna un valor en un atributo o etiqueta con la posible diferencia de añadir código html.

Ejemplo .text():

<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
    $("button").click(function(){
        $("p").text("Hello world!");
    });
});
</script>
</head>
<body>

<button>Set text content for all p elements</button>

<p>This is a paragraph.</p>
<p>This is another paragraph.</p>

</body>
</html>

Ejemplo .html():

<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
    $("button").click(function(){
        $("p").html("Hello <b>world!</b>");
    });
});
</script>
</head>
<body>

<button>Change content of all p elements</button>

<p>This is a paragraph.</p>
<p>This is another paragraph.</p>

</body>
</html>

¿A qué se debe la diferencia realmente? ¿Se pueden usar los dos indistintamente?

4 respuestas 4

4

Como tú lo has dicho:

  • .text() inserta específicamente un string o cadena dentro de el selector de jQuery, puedes insertar tanto HTML como tú quieras, pero este nunca será procesado por el navegador, siempre se quedará como una simple cadena de carateres. Ejemplo:

<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
    $("button").click(function(){
        $("p").text("<b>Hello world!</b>");
    });
});
</script>
</head>
<body>

<button>Set text content for all p elements</button>

<p>This is a paragraph.</p>
<p>This is another paragraph.</p>

</body>
</html>

  • .html() por otro lado puedes usarlo para insertar elementos de HTML, tu navegador lo interpretará y mostrará según el elemento que estés insertando, estoy incluye también dar formato a elementos que contengan ciertas clases y/o ids que correspondan a aquellos que tengas definidos en tu archivo CSS, esto te dá más dinamismo a la hora de que utilizas esta función comparada con la de .text() Ejemplo:

<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
    $("button").click(function(){
        $("p").html("Hello <b>world!</b>");
    });
});
</script>

</head>
<body>

<button>Change content of all p elements</button>

<p>This is a paragraph.</p>
<p>This is another paragraph.</p>
<style>
    b{
        background: red;
    }
</style>
</body>
</html>

1

La principal diferencia es como tratan el texto, ya que la función .text() trata el texto como formato texto y .html() lo trata como formato HTML.

Es decir, si por ejemplo quisieras imprimir un link, la función .text() te imprimiría las etiquetas también mientras que la función .html() interpretaría las etiquetas y te mostraría el link.

Ejemplo:

 $("#texto1").html('<a href="#">Esto es un link con la función html</a>');
 $("#texto2").text('<a href="#">Esto es un link con la función text</a>');
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div id="texto1"></div>
<div id="texto2"></div>

1

La diferencia es que con .html() recoges todo el código (tags HTML y todo) y con el .text() te recoge solo el texto que contienen todas las etiquetas que haya dentro de lo que llamas.

Por ejemplo:

<div id="prueba">
   <p>Hola</p>
</div>

Si cogemos: jQuery("#prueba").html() nos devuelve

'<p>Hola</p>'

Si cogemos: jQuery("#prueba").text() nos devuelve

'Hola'

Espero haberme explicado

te dejo un link aquí para demostrarlo

(https://jsfiddle.net/54aLm6p3/)

0
0

Función text

Cuando se usa sin parámetro, retorna el texto del elemento y también de sus descendientes. Es decir, si aplicas text en un elemento padre obtienes su texto y el texto de sus hijos.

Cuando se usa con parámetro, establece un texto solo en el elemento seleccionado.

Función html

Cuando se usa sin parámetros, retorna el código HTML que compone dicho elemento; esto incluye a sus descendientes.

Cuando se usa con parámetro, establece dentro del elemento seleccionado un nuevo código HTML, sobreescribiendo así el contenido del elemento.

// obtener
console.info('Obteniendo texto y HTML..')
console.log($('#padre').text())
console.log($('#padre').html())

// establecer
console.info('\nCambiando el texto y HTML...')
$('#padre').text('Hi')
$('#padre').html('<h1>Hijo</h1>')
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<p id="padre">
  Hola
  <span id="hijo">Hijo</span>
</p>

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.