How to add html tag in div using jquery

How to add html code in div tag using jquery


In this tutorial, you will learn how to add html code in div tag using jquery.

We will be using jQuery append() method or html() method to add the html code in div tag in jquery as given below example:

Syntax:

$(selector).append( code )

$(selector).html( code )

Example:

<!DOCTYPE html>
<html lang="en">
<head>
    <title>How to add text in p tag using jquery</title>
</head>
<body>

    <div id="appendMethodCodeDemo"></div>

    <div id="htmlMethodCodeDemo"></div>

    <button type="button" id="myButton">Click Me</button>

    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
    <script>
        $(document).ready(function () {

            $('#myButton').click(function (e) {
                e.preventDefault();

                var htmlCode_content = '<div> I am div with append() <h5>I am Heading</h5> <p>I am para</p> <hr/> </div>';
                $('#appendMethodCodeDemo').append(htmlCode_content);  //html() Method

                var htmlCode_content = '<div> I am div with html() <h5>I am Heading</h5> <p>I am para</p> <hr/> </div>';
                $('#htmlMethodCodeDemo').html(htmlCode_content); //html() Method

            });

        });
    </script>
</body>
</html>


Thanks for reading.

© Copyright - 2018 - 2022 | All rights reserved at Funda of Web IT