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

You should be able to do something like:

😀

See this code pen

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