Difference between .text () and .html () in jQuery

Question

Difference between .text () and .html () in jQuery

Navigation

#1 by (2 votes)
#2 by (1 votes)
#3 by (1 votes)
#4 by (0 votes)

1

I would like to know the difference between two methods or functionalities of jQuery that can be confusing in my case, even reading the API of both utilities such as:

.text ()
.html ()

According to w3s, .text () places and retouches a value in an attribute or label of our HTML; and html () places and returns a value in an attribute or tag with the possible difference of adding html code.

Example .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>

Example .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>

Why is the difference really? Can you use both indistinctly?

jquery

asked by omaza1990 03.06.2017 в 15:51

source

4 answers

1

The main difference is how they treat the text, since the function .text() treats the text as text format and .html() treats it as HTML format.

That is, if for example you want to print a link, the function .text() would print the labels as well, while the function .html() would interpret the labels and show you the link.

Example:

 $("#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>

answered by 03.06.2017 в 16:03

1

The difference is that with .html () you collect all the code (HTML tags and all) and with the .text () it collects only the text that contains all the tags inside what you are calling.

For example:

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

If we take: jQuery ("#test"). html () returns us

'<p>Hola</p>'

If we take: jQuery ("# test"). text () returns us

'Hola'

I hope you explained to me

I leave a link here to prove it

( link )

answered by 03.06.2017 в 16:00

0

Function text

When used without a parameter, returns the text of the element and also of its descendants. That is, if you apply text in a parent element, you get its text and the text of its children.

When used with a parameter, set a text only on the selected element.

Function html

When used without parameters, returns the HTML code that makes up that element; This includes his descendants.

When used with a parameter, set a new HTML code within the selected element, overriding as well as the content of the element.

// 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>

answered by 03.06.2017 в 16:12

Remove WPF buttons by default Separate elements from a list identifying a set of letters

score 2 · Accepted Answer

As you said:

.text() specifically inserts a string or string inside the jQuery selector, you can insert as much HTML as you want, but it will never be processed by the browser, it will always remain as a simple string of characters. Example:

<!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() on the other hand you can use it to insert HTML elements, your browser will interpret it and show it according to the element you are inserting, I am also including formatting elements that contain certain classes and / or ids that correspond to those that you have defined in your CSS file, this gives you more dynamism when you use this function compared to .text() Example:

<!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>