JQuery html() not support < symbol

Question

When changing the content with .html() there is an issue not showing the whole data:

<!DOCTYPE html>
<html>
<head>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.0/jquery.min.js"></script>

  <script>

    $(document).ready(function() {
      $("#btn2").click(function() {
        $("#test2").html("<b>Hello < world!</b>");
      });

  </script>
</head>

<body>
  <p id="test2">Result here</p>
  <button id="btn2">Click for result</button>
</body>

</html>

The result I get is: Hello

I need the result to be: Hello < world!

This is just a sample.

You probably need to escape that `<`, have you tried `<`? – Kanwal Sarwara May 24 '19 at 18:25 — Kanwal Sarwara, May 24 '19 at 18:25

score 3 · Answer 1 · answered May 24 '19 at 18:27

You can use < in your snippet to be explicit but that was not your issue, your JS issue was not closing of jQuery.ready function in your snippet.

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.0/jquery.min.js"></script>
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.0/jquery.min.js"></script>
<script>
  $(document).ready(function(){
    $("#btn2").click(function(){
        $("#test2").html("<b>Hello &lt; world!</b>");
    });
  });
</script>
</head>
<body>
    <p id="test2">Result here</p>
    <button id="btn2">Click for result</button>
</body>
</html>

Shidersz · Answer 2 · 2019-05-24T18:44:03.250

You can use HTML entity < to replace the < symbol.

$(document).ready(function()
{
    $("#btn2").click(function()
    {
        $("#test2").html("<b>Hello &lt; world!</b>");
    });
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<p id="test2">Result here</p>
<button id="btn2">Click for result</button>

If you don't have control over the input text, then you can Encode html entities in javascript. As mentioned on that link, you can create a method to encode the input str:

function encodeStr(str)
{
    return str.replace(
        /[\u00A0-\u9999<>\&]/gim,
        i => '&#' + i.charCodeAt(0) + ';'
    );
}

$(document).ready(function()
{
    $("#btn2").click(function()
    {
        let text = "Hello < world!";
        $("#test2").html("<b>" + encodeStr(text) + "</b>");
    });
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<p id="test2">Result here</p>
<button id="btn2">Click for result</button>

score 0 · Answer 3 · answered May 24 '19 at 18:27

This fiddle suggests your code works (to a degree): https://jsfiddle.net/6y2s0ue9/

You may just want to correct the $(document).ready to close, like this:

$(document).ready(function(){
    $("#btn2").click(function(){
        $("#test2").html("<b>Hello < world!</b>");
    });
});

On click of the button, it replaces "Result here" with "Hello < world!"

score 0 · Answer 4 · answered May 24 '19 at 18:40

With .html() the code will read the < symbol as a tag so it will print nothing so other answers can solve that.. But with .text() it will read as it is so no need to replace symbol with <

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.0/jquery.min.js"></script>
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.0/jquery.min.js"></script>
<script>
  $(document).ready(function(){
    $("#btn2").click(function(){
        $("#test2").html($('<b></b>').text("Hello < world!"));
    });
  });
</script>
</head>
<body>
    <p id="test2">Result here</p>
    <button id="btn2">Click for result</button>
</body>
</html>

JQuery html() not support < symbol

4 Answers4