How to add Pages On button click in javascript

It is difficult to use your code as I don't have all scripts.

Please give me simple HTML code with the DIVs in between which you want to add .

<form id="TagForm" runat="server">
     <center style="padding-top:20px">
<div id="s5">
    <div  style="width:500px; height:500px; border:10px soild #ffffff;">
     
     <div id="div1"><img src="../CoverImage.jpg" width="500" height="650"` alt="Product1"/></div>
     </div>
    
    <div  style="width:500px; height:500px; border:10px soild #ffffff;background-color:Aqua;">
     <div id="div2"  style="padding-left:100px; float:left;"><img class="movable" src="../1.png" width="70" height="70" alt="Product1"/></div>
     <div style="padding-left:200px;">Product Details <br /> Product name<br /> Product Id</div>
      <div style="padding-left:100px; float:left;"><img class="movable" src="../1.png" width="70" height="70" alt="Product1"/></div>
      <div style="padding-left:200px;">Product Details <br /> Product name<br /> Product Id</div>
      <div style="padding-left:100px; float:left;"><img class="movable" src="../1.png" width="70" height="70" alt="Product1"/></div>
     <div style="padding-left:200px;">Product Details <br /> Product name<br /> Product Id</div>
      <div style="padding-left:100px; float:left;"><img class="movable" src="../1.png" width="70" height="70" alt="Product1"/></div>
      <div style="padding-left:200px;">Product Details <br /> Product name<br /> Product Id</div>
      
    </div>

    <div id="div3" style="width:500px; height:500px; border:10px soild #ffffff; background-color:Silver;">
     <div style="padding-left:100px; float:left;"><img class="movable" src="../1.png" width="70" height="70" alt="Product1"/></div>
     <div style="padding-left:200px;">Product Details <br /> Product name<br /> Product Id</div>
      <div style="padding-left:100px; float:left;"><img class="movable" src="../1.png" width="70" height="70" alt="Product1"/></div>
      <div style="padding-left:200px;">Product Details <br /> Product name<br /> Product Id</div>
      <div style="padding-left:100px; float:left;"><img class="movable" src="../1.png" width="70" height="70" alt="Product1"/></div>
     <div style="padding-left:200px;">Product Details <br /> Product name<br /> Product Id</div>
      <div style="padding-left:100px; float:left;"><img class="movable" src="../1.png" width="70" height="70" alt="Product1"/></div>
      <div style="padding-left:200px;">Product Details <br /> Product name<br /> Product Id </div>
      
    </div>

    <div id="div4" style="width:500px; height:500px; border:10px soild #ffffff; background-color:Lime">
     <div style="padding-left:100px; float:left;"><img class="movable" src="../1.png" width="70" height="70" alt="Product1"/></div>
     <div style="padding-left:200px;">Product Details <br /> Product name<br /> Product Id</div>
      <div style="padding-left:100px; float:left;"><img class="movable" src="../1.png" width="70" height="70" alt="Product1"/></div>
      <div style="padding-left:200px;">Product Details <br /> Product name<br /> Product Id</div>
      <div style="padding-left:100px; float:left;"><img class="movable" src="../1.png" width="70" height="70" alt="Product1"/></div>
     <div style="padding-left:200px;">Product Details <br /> Product name<br /> Product Id</div>
      <div style="padding-left:100px; float:left;"><img class="movable" src="../1.png" width="70" height="70" alt="Product1"/></div>
      <div style="padding-left:200px;">Product Details <br /> Product name<br /> Product Id </div>
    </div>
   
</div>
    <div class="nav1" style="padding-top:10px">
       <center> <asp:Button ID="prev1" runat="server" Text="Prev" Width="70px" />         
         <asp:Button ID="next1" runat="server" Text="Next" Width="71px" /></center>
         </div>
         <input type = "text" id = "txtPage" />
        <input type = "button" id = "btnPage" value = "Go"/>
        <div id="nav">
            <%--<asp:Button ID="first1" runat="server" Text="First" />
             <asp:Button ID="last1" runat="server" Text="Last" />--%>
             
             </div>
            <%-- <div id="nav">
             <input type="text" name="inputbox" OnBlur="validate(this.form)" />
             <input type="button" name="button"  Value="Click" onClick="testResults(this.form)" />
             </div>--%>

      <div id="container"><img class="movable" src="../1.png" width="70" height="70" alt="prd5"/></div>
        <input type = "button" id = "btnAdd" value = "Add" />
    </center>
</form>

This my code.

Naw i want to add another div(page) on button click.

Shirin says:

Please reply me.

as the code given by you.

i can add html :-HELLO ONLY.

IF SUPPOSE I TOOK A IMAGE IN DIV AND I WANT TO ADD THAT DIV THEN HOW TO WRITE THE CODE.

Here's the code for DIV with images

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>
    <script type = "text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
    <script type="text/javascript">
        $("#btnAdd").live("click", function () {
            var dv = $("<div/>").html("<img src = 'http://www.aspforums.net/Avatars/Mudassar.jpg?634578735955470000' style = 'height:50px;width:50px' />");
            $("#container").append(dv);
        });
    </script>
</head>
<body>
    <form id="form1" runat = "server">
        <div id = "container"></div>
        <input type = "button" id = "btnAdd" value = "Add" />
    </form>
</body>
</html>

Demo

Hi the above code can add div one after the other but it can not possible to add div in my application

So where you want to add DIVs. Before each other? between each other?