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.

Insert or add 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 &#x263A;.

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 style='font-size:100px;'>
    <input type='button' value='Now Smile' onclick='smile()' />
    <p id="msg"></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 style='font-size:50px;'>
    <input type='button' value='More Characters' onclick='showSymbols()' />
    <p id="msg"></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

That’s it. Thanks for reading.

Previous - How to rotate an Image dynamically using JavaScriptNext - Automatically add a Dash or Hyphen after every 3rd character using JavaScript or jQuery



Like this Article? Subscribe now, and get all the latest articles and tips, right in your inbox.

Enter your email id

Delivered by FeedBurner
Tweet this article Google+

Related Posts:

Join our Google Plus Community and be a part of a discussion!