I have two simple strings I want to output (both coming from user input). The `console.log` says that they are properly received by JavaScript into their respective variables, but when I output them via `innerHTLM`, the first is truncated at the "<" symbol.

JavaScript

```
var content1 = "Dog- Happy<Hungry", content2 = "Dog- Happy<2Hungry"
console.log(content1,content2)
document.getElementById("output").innerHTML = content1 + "<br>" + content2

```

Output

```
Dog- HappyDog- Happy<2Hungry

```

Expected Output

```
Dog- Happy<Hungry
Dog- Happy<2Hungry

```

The input is from users and I want them to be able to use the "<" symbol, as it is a common symbol for this type of input. I am guessing that the "<" is being seen as the beginning of an HTML tag, though I am not sure. How do I solve this, so that they can use the "<" symbol?

Here is a JSFiddle if it is helpful: <https://jsfiddle.net/m79dca3p/>

[Encode html entities in javascript](https://stackoverflow.com/questions/18749591/encode-html-entities-in-javascript/18750001#18750001) does not help as those responding are split on the best solution, thus it is still an open debate and not a solution.