How to create anchor tag using jquery

Create anchor tag using jquery

By Yashwant Chavan, Views 20255, Date 06-Oct-2015

In this jquery tutorial, I will help you how to create HTML tag / element using Jquery. Here I have created simple anchor tag (link) using Jquery DOM element API.

tags jquery

Jquery Dynamic anchor tag

In below example I have created simple link (anchor tag) which is pointed to www.google.com along with its different properties like attributes, text, class etc. Once the link is form we will add it to div element.

<!DOCTYPE html>
<html>

<head>
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
    <script>
        $(document).ready(function() {
            $('#btn').click(function() {

                var link = $("<a>");
                link.attr("href", "http://www.google.com");
                link.attr("title", "Google.com");
                link.text("Google");
                link.addClass("link");

                $(".box").html(link);
            });
        });
    </script>
</head>

<style>
    p {
        margin: 10px;
        font-weight: bold;
    }
    
    .link {
        color: red;
        font-size: 25px;
        font-weight: bold;
        text-decoration-style: solid;
        margin: 10px;
    }
</style>

<body>
    <h1>Jquery Show Hide </h1>
    <div class="box" id="box"></div>
    <p><input type="button" id="btn" value="Create Link"></p>
</body>

</html>

Output

Create anchor tag using jquery
Yashwant

Yashwant

Hi there! I am founder of technicalkeeda.com and programming enthusiast. My skills includes Java,J2EE, Spring Framework, Nodejs, PHP and lot more. If you have any idea that you would want me to develop? Lets connect: yashwantchavan[at][gmail.com]