dom.html

<html>
    <head>
        <title> Default HTML</title>
        <link rel="stylesheet" href="../css/style.css">
        <!--
            text(),html(),attr(),css()
        -->
        
        </head>
        <body>
            <h2>JQuery DOM Manipulation</h2>
            <button id="btn1">Text method</button>
            <button id="btn2">HTML method</button>
            <div id="div1" class="mydiv">
                <p class="pclass" id="p1">This is JQuery dom <b>manipulation </b>inside para tag</p>
                </div>
            </body>
            <script src="../jquery/jquery.js"></script>
            <script>
                $(document).ready(function(){
                    $("#btn1").click(function(){
                       // alert($("#p1").text()); //working as gettter
                       //working as setter
                       $("#p1").text("Hello <b>Trupti<b>. this is text method");//shows html tags also as it is
                       alert($('#div1').css("border"))
                    });

                    $("#btn2").click(function(){
                    $("#p1").html("html<b> method<b>"); //shows html tags also
                    alert($('#p1').attr("class")); //gives the attr name

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

