jQuery Show Popup on Page Load

6 Sep 2013

JQuery append() method

JQuery append () method is used to add or insert one or more additional DOM elements in the set of matched elements .In this article I am trying to show you,  how we can use append method in JQuery.  I have list of images and I want to append image in <label> element.

Code:

 
<title>JQeury append method</title>
 
    <script type="text/javascript" src="jquery.min.js">     </script>
 
    <script type="text/javascript">
        $(document).ready(function()  
        {
            $("button#btn1").click(function
            {
            $("label").append("<img src='Desert.jpg' width='100' height='50'/>"); // append method will append image in <label> element
            });
            $("button#btn2").click(function
             {
            $("label").append("<img src='Chrysanthemum.jpg' width='100' height='50'/>");
            });
            $("button#btn3").click(function()
           {
            $("label").append("<img src='Lighthouse.jpg' width='100' height='50'/>");             });
 
        });
        
    </script>
</head>
<body>
    <h2>
        JQuery append method</h2>
    <table width="200" border="2">
        <tr>
            <td align="center">
                <img src='Chrysanthemum.jpg' width='100' height='50'             </td>
            <td align="center">
                <button id='btn1'>
                    Add</button>
            </td>
        </tr>
        <tr>
            <td align="center">
                <img src='Desert.jpg' width='100' height='50' />
            </td>
            <td align="center">
                <button id="btn2">
                    Add</button>
            </td>
        </tr>
        <tr>
            <td align="center">
                <img src='Lighthouse.jpg' width='100' height='50' />
            </td>
            <td align="center">
                <button id="btn3">
                    Add</button>
            </td>
        </tr>
    </table>
    <label style="left:245px; top:62px; position:absolute">This is a example
    of JQuery append method you can add image from list--  </label> label element with text-->
</body>

Screenshot

JQuery append() method
If we want to append image in the <label>element we can click on particular image button and image will append as shown below:

Screenshot

JQuery append() method

No comments:

Post a Comment