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
No comments:
Post a Comment