Using Jquery clone Method we can create a duplicate element from the elements already present in the Html code.
Example: In this below Example on the button click i will duplicate the <div> content and display that duplicate <div> below the button.
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="JqueryClone.aspx.cs" Inherits="JqueryClone" %>
<!DOCTYPE html>
<html>
<head>
<title></title>
<script language="javascript" type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function () {
$("#Button1").click(function () {
$("#div1").clone().insertAfter("#Button1");
});
});
</script>
</head>
<body>
<div id="div1">Jquery is Awesomee !!</div>
<input id="Button1" type="button" value="button" />
</body>
</html>
Output:
Example: In this below Example on the button click i will duplicate the <div> content and display that duplicate <div> below the button.
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="JqueryClone.aspx.cs" Inherits="JqueryClone" %>
<!DOCTYPE html>
<html>
<head>
<title></title>
<script language="javascript" type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function () {
$("#Button1").click(function () {
$("#div1").clone().insertAfter("#Button1");
});
});
</script>
</head>
<body>
<div id="div1">Jquery is Awesomee !!</div>
<input id="Button1" type="button" value="button" />
</body>
</html>
Output:
No comments:
Post a Comment