Issue in displaying '<' symbol dynamically with JavaScript

Question

When I try to display a string with '<' symbol in it, the part of string after the symbol gets ignored. However, when I log it in console it's displayed correctly. Here's a snippet of the issue:

console.log('display<hide');//Displays Full text
document.getElementById('somediv').innerHTML='display<hide';//Removes remaining part

<div id="somediv">
        
</div>

Why does this happen?

Edit:

I am aware about &lt and &gt in HTML, but my question is regarding the issue in displaying < as I had no issues displaying > with innerHTML

Your string is being parsed by the browser's HTML parser. You have to use HTML entity notation to include `<` in HTML, `<` Or, use `innerText`. — Pointy, Feb 26 '21 at 13:40
@Pointy but i had no issues with ````>```` operator, it was displayed in the output. — Shardul Birje, Feb 26 '21 at 15:01
Yes, they are different but if ````<```` is converted to ````<```` then why isn't ````>```` converted to ````>````. — Shardul Birje, Feb 26 '21 at 15:11
Personally I would encode `>` as `>` just as a good practice. In fact I generally encode `<`, `>`, `&`, `"`, and `'`. It doesn't hurt anything and that may be necessary in weird browsers. — Pointy, Feb 26 '21 at 15:17

score 3 · Answer 1 · answered Feb 26 '21 at 13:40

3

Switch to innerText:

document.getElementById('somediv').innerText='display<hide';

< and > are reserved characters in HTML for tags.

answered Feb 26 '21 at 13:40

thab

666
1
6
14

Yup that works but '>' operator was displayed with innerHTML too – Shardul Birje Feb 26 '21 at 14:59

score 2 · Accepted Answer · answered Feb 26 '21 at 13:42

2

The opening bracket in your string is parsed as malformed HTML then <hide gets ignored: so either you use .textContent instead of .innerHTML or you change the < character into its HTML entity <

answered Feb 26 '21 at 13:42

Fabrizio Calderan

120,726
26
164
177

Issue in displaying '<' symbol dynamically with JavaScript

Edit:

2 Answers2