Strange output when trying to get an element's HTML code value?

Question

I have a <span> element with the following text:

List<Tuple<string, string>>

When I get its html attribute using jQuery, I get a strange outcome:

List<tuple<string, string="">&gt;</tuple<string,>

I realize it's parsing the value as HTML, but using .text() also returns an incorrect value. Can anyone explain why this is happening and how can I resolve it?

Here's a snippet reproducing the issue:

console.log($('#lbl').html());

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<span id="lbl">List<Tuple<string, string>></span>

Answer 1

Why this is happening: because your HTML is invalid. You should not use the < or > characters except for delimiting tags. Instead you must use < and > respectively. Your browser tries to be robust to this kind of error, and so it tries to make sense of those strange looking tags. The result you get is the best it could do about it (but another browser may interpret it differently, as this is not standard).

How can you resolve it: write it as correct HTML, that is:

<span id="lbl">List&lt;Tuple&lt;string, string&gt;&gt;</span>

Answer 2

You need to replace < with '<' and > with '>' to show in html.

console.log($('#lbl').html());

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<span id="lbl">List&lt;Tuple&lt;string, string&gt;&gt;</span>