Old Geezer Old Geezer - 1 month ago 11
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

😀
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
&#x1f600;
. 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>

JJJ JJJ
Answer

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>