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
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
Leave a Comment