How to display heart symbols unicode to webpage?

I have at table in which there is list of symbols with their details and on click of Get Code button i am passing values to modal to show hear symbol details to modal.

Here is my table one example list code :

  <tr>
    <td style="font-size: 30px;">❤</td>
    <td>Classic Heart Emoji</td>
    <td>
    <button type="button" class="code-btn" data-toggle="modal" data-target="#exampleModal"
    onClick="sendvalue('Classic Heart Emoji','#x2764','#10084','U+2764','Heavy black Heart','Dingbats','&#x2764');">Get
            Code</button></td>
</tr>

Here is my bootstrap modal code :

    <div class="modal fade" id="exampleModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel"
    aria-hidden="true">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="exampleModalLabel">Symbol Details</h5>
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span class="white" aria-hidden="true">&times;</span>
                </button>
            </div>
            <div class="modal-body">
                <div class="row ml-0 mr-0">
                    <div class="col-md-4 col-12">
                        <div class="modal-emoji" id="mysymbol" style="font-size:75px">
                        </div>
                    </div>
                    <div class="col-md-8 col-12">
                        <h3 class="site-text grey" id="title">
                            <br>
                        </h3>
                        <div class="custom-text" id="symbol">
                        </div>
                        <p class="site-text grey" id="code">
                            <br>
                        </p>
                        <p class="site-text grey" id="unicode">
                            <br>
                        </p>
                        <p class="site-text grey" id="unicodename">
                            <br>
                        </p>
                        <p class="site-text grey" id="unicodeblock">
                            <br>
                        </p>
                    </div>
                </div>
            </div>
            <div class="modal-footer">
                <button type="button" class="code-btn" data-dismiss="modal">Close</button>
            </div>
        </div>
    </div>
</div>

Here is my js function :

function sendvalue(title, html1, html2, unicode, unicodename, unicodeblock, symbol) {
        console.log(html1, html2,unicode)
        document.getElementById("mysymbol").innerHTML = symbol;
        document.getElementById("title").innerHTML = title;
        document.getElementById("symbol").innerHTML = "Symbol / Emoji: " + symbol;
        document.getElementById("code").innerHTML = '&'+html1+"; OR "+'&'+html2+";";
        document.getElementById("unicode").innerHTML = "<b>Unicode   :   <b>" + unicode;
        document.getElementById("unicodename").innerHTML = "<b>Unicode Name  : </b> " + unicodename;
        document.getElementById("unicodeblock").innerHTML = "<b>Unicode Block  : </b> " + unicodeblock;
    }

The problem is when in modal unicode is converting into symbol but i want to show that symbol html quivalent code exactly as i am passing this code #10084 as string in function and then in function appending & with it inside function to show on screen like &#10084. But it is converting this code to symbol. How can i fix it?

Solution

Instead of using innerHTML, use innerText or textContent.

Simply put, using innerHTML tells the browser to render what the entities describe, while innerText will parse the text it self.

Using the other options, you can of course not use the <b></b> tags, since this will also be rendered as the text values. You can however switch between inputing strings with both innerHTML and innerText.