How to print a variable containing html content as string?

Question

I am trying to show a user entered data from a text box to a html div. User entered data can be anything. If the data contains html contents , it gets screwed up as the content is not shown as string rather than html elements.

eg

let text = "<h1>World</h1>";
document.getElementById("demo").innerHTML = text;

I want output as <h1>World</h1> instead it is showing

World

How to fix this ?

Answer 1

You can use innerText instead of innerHTML so that it doesn't render the string as html.

let text = "<h1>World</h1>";
document.getElementById("demo").innerText = text;

<p id="demo"></p>