Old Geezer Old Geezer - 9 months ago 53
HTML Question

How to display the original raw Html code?

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

. 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
in its literal form of
and not 😀

Thanks for all the helpful answers. I tried using
but they didn't work for me. I used jQuery to select a
element and set its
. 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:

$('.emoji').click( function() {

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

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

Answer Source

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

  $('.emoji').click( function() {
<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>