Java-Script/JqueryDOMManipulation_2.html at main · 26312/Java-Script · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
<html>
    <head> JQuery DOM Manipulation - 2
        <title>JQuery DOM Manipulation - 2 </title>
        <link rel="stylesheet" href="CSS/JqueryDOMManipulation_2.css">
    </head>
    <body>
        <br><br>
        <p>Welcome to JQuery DOM Manipulation-2</p>
        <button id="btn1">Append</button>
        <button id="btn2">Prepend</button>
        <button id="btn3">After</button>
        <button id="btn4">Before</button>
        <button id="btn5">Remove</button>
        <button id="btn6">Empty</button>
        <br>
        <br>
        <div id="div1" class="mydiv">
            <p id="p1">This is the <i>first</i> paragraph of the <b>DIVISION</b></p>
            <p id="p2">This is the <u>second</u> paragraph of the <b>DIVISION</b></p>
        </div>
    </body>
    <script type="text/javascript" src="JS/jquery.js"></script>
    <script>
        $(document).ready(function (){

            $("#btn1").click(function (){

                $("#div1").append("This is the last paragraph");

            });

            $("#btn2").click(function (){

                $("#div1").prepend("This should have been the first paragraph");
            });

            $("#btn3").click(function (){

                $("#div1").after("<p>This is paragraph is outside the div</p>");
            });

            $("#btn4").click(function (){

                $("#div1").before("<p>This is the first paragraph outside the div</p>");
            });

            $("#btn5").click(function (){

                $("p").remove("#p1,#p2");
            });

            $("#btn6").click(function (){

                $("#div1").empty();
            });
        });

    </script>

    </html>