show html tags in html content, show html code snippet in html

Question

I was wondering if there is a way I could apply htmlentities() to var x so that if I put <p>hello</p> into the text area and press the button it would display <p>hello</p> instead of hello using the below code.

Thanks in advance

 function myFunction1() { var x = document.getElementById("myText1").value; document.getElementById("demo1").innerHTML = x; }

 <textarea name="myText" id="myText1" type="text"></textarea> <button onclick="myFunction1()">thing</button> <p><span id="demo1"></span></p>

Answer 1

You need to use <xmp> tag

 <xmp> <p>hello</p> </xmp>

 function myFunction1() { var x = document.getElementById("myText1").value; document.getElementById("demo1").innerHTML = x; }

 <textarea name="myText" id="myText1" type="text"></textarea> <button onclick="myFunction1()">Show</button> <p><xmp id="demo1"></xmp></p>

Answer 2

Generally this is done by replacing the < symbol with the "less than" HTML encoding ( < ), and > with "greater than" ( > ).

For instance, you should use basic string methods to replace something like

"<p>hello</p>"

with

"<p>hello</p>"

(Otherwise, adding it to an element's innerHTML will read it as HTML, including the tags.)

I should point out that you can also try just wrapping everything in the <pre> tag, but I've had varying results with it. I think the method above is a safer bet.