How to display the original raw Html code?

Question

I have the opposite of what most are asking. I want to display the original Html character code instead of displaying its glyph.

I have a table of emojis using the latest Unicode codes. For example, 😀 😇 are written in the page as 😀 and &#1f607;. I am doing a quick reference utility, so that when I click one of them, I want to show the code of the graphic. Unfortunately, if I push the character value to an element's innerText or innerHTML, it always show the glyph. How do I display a value of &#1f600; in its literal form of &#1f600; and not 😀

---

Thanks for all the helpful answers. I tried using <code> and <pre> but they didn't work for me. I used jQuery to select a <code> element and set its text to 😀. The graphic is shown instead of the literal code characters. Perhaps I am using the wrong property or function. Or should I be not using jQuery at all?

My code is:

<script>
  $('.emoji').click( function() {
     $('#selected').text(this.innerText);
  });
</script>

<div class='emoji'>&#x1f600;</div> 
<div class='emoji'>&#x1f607;</div>

<code id='selected'></code>

Answer 1

In case you encode only the ampersand & and it will show what you want:

😇😇

😇 😇

Answer 2

The easiest way is to save the character code to a data attribute and pull it from there.

  $('.emoji').click( function() {
     $('#selected').text("&#x"+$(this).data('code')+";");
  });

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div class='emoji' data-code="1f600">&#x1f600;</div> 
<div class='emoji' data-code="1f607">&#x1f607;</div>

<code id='selected'></code>

Answer 3

You should be able to do something like:

😀

See this code pen

http://codepen.io/anon/pen/MbgKpw

Answer 4

Here is a fiddle: https://jsfiddle.net/3mbdpzdq/

<xmp>
    &#x1f600;
</xmp>