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 hello into the text area and press the button it would display hello 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>

Zohaib Ijaz · Accepted Answer · 2020-01-24 22:23:02Z

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>

answered Jan 24, 2020 at 22:23

Zohaib Ijaz

23k7 gold badges43 silver badges63 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

tlong314 Over a year ago

<xmp> tag is deprecated so might not work in all browsers. <pre> or <code> tag is preferred.

tlong314 · Accepted Answer · 2020-01-24 22:26:12Z

0

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

"hello"

with

"hello"

(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.

answered Jan 24, 2020 at 22:26

tlong314

5464 silver badges8 bronze badges

Collectives™ on Stack Overflow

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

2 Answers 2

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related