Dynamically insert or add a Smiley using JavaScript

You can add or insert various symbols in your web page using HTML Unicode. Many characters or symbols that you often see in HTML pages have a unique code or a Decimal code. You can easily insert these codes in your HTML page. I’ll show you how you can add or insert a Smiley using JavaScript.

A Smiley can be an icon. However, you can also use a simple ASCII or a Unicode to insert a Smiley in your HTML page. For example,

<html>
<head>
    <title>Insert a Smiley</title>
</head>
<body style='font-size:30px;'>
    <div>Hello world &#9786;</div>
</body>
</html>

Try it

Here's a list of other Symbols that you can add in your web page.

The Unicode or the Decimal code 9786, prefixed with &#, shows a white Smiley after the string Hello world. It also has a hex code value ☺.

Now let’s see how you can use the above code dynamically inside your JavaScript code.

<html>
<head>
    <title>Insert a Smiley using JavaScript</title>
</head>
<body>
    <input type='button' value='Now Smile' onclick='smile()' />
    <p id="msg" style='font-size:100px;'></p>
</body>
<script>
    function smile() {
        var msg = document.getElementById('msg');
        msg.innerHTML = '&#9786;';
    }
</script>
</html>

Try it

It is simple. All you have to do is, assign the code &#9786 to the element.

More Symbols using HTML Unicode

As I said in the beginning, there are many unique HTML codes for different symbols. The script below shows many other interesting symbols in the Range 9728 and 10000.

<html>
<head>
    <title></title>
</head>
<body>
    <input type='button' value='More Characters' onclick='showSymbols()' />
    <p id="msg" style='font-size:50px;'></p>
</body>
<script>
    function showSymbols() {
        var msg = document.getElementById('msg');
        msg.innerHTML = 'Smile ' + '&#9786;';

        for (var i = 9728; i <= 10000; i++) {
            msg.innerHTML = msg.innerHTML + '<br />' + ' &#' + i + ';   ( ' + i + ' )';
        }
    }
</script>
</html>

Try it

← PreviousNext →