Adding a div dynamically using append()

Question

Kindly notify me I am explaining it well or not. I'm using .append() to repeat a div inside a page.

HTML

 <html>
 <head>
 <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js"></script>
 <script>
  $(document).ready(function(){
    $("#num").click(function () {
      $('#form').append("<div class='Box'>I'm new box by prepend</div>");   
    });
  });
  </script>
  </head>

  <body>
    <div id="form">
       Hai Add Another by clicking the button
    </div>
    <button id="num">Click Me</button>
  /body>
 </html>

This works good when I add a div repeatedly. But I like to call it externally like the below code.

 <html>
  <head>
   <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js"></script>
   <script>
    $(document).ready(function(){
      $("#num").click(function () {
        $('#form').append($('#Box'));   
      });
    });
  </script>
  </head>

  <body>
  <div id="form">
  Hai Add Another by clicking the button
  </div>
  <div class='Box'>I'm new box by prepend</div>
  <button id="num">Click Me</button>
 /body>
 </html>

Why is this not working?

bookcasey · Accepted Answer · 2012-12-01 05:17:13Z

3

Try using clone():

 <html>
 <head>
 <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js"></script>
 <script>
  $(document).ready(function(){
  $("#num").click(function () {
  $(".Box:first").clone().appendTo("#form"); 
});
});
  </script>
  </head>

  <body>
  <div id="form">
  Hai Add Another by clicking the button
  </div>
  <div class='Box'>I'm new box by prepend</div>
  <button id="num">Click Me</button>
 </body>
 </html>

You have to create a new element before adding it.

Demo

edited Dec 1, 2012 at 5:17

answered Dec 1, 2012 at 5:10

bookcasey

40.9k13 gold badges83 silver badges95 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Vivek Dragon Over a year ago

Thanks man but clone() repeats all the previous divs created inside. i just want to add only one div per click. Is there any other solution for it.

Vivek Dragon Over a year ago

if i use a inputbox the same value inside it gets repeated due to clone() is there any other way to avoid it?

Pragnesh Chauhan · Accepted Answer · 2012-12-01 05:16:11Z

3

try this

 $(document).ready(function(){
    $("#num").click(function () {
       $(".Box").first().clone().appendTo("#form"); 
    });
 });

answered Dec 1, 2012 at 5:16

Pragnesh Chauhan

8,49410 gold badges46 silver badges58 bronze badges

1 Comment

Raghurocks Over a year ago

if you think the code helped you and its working, keep the answer as accepted as it might help for the future viewers also.

Rahul Tripathi · Accepted Answer · 2012-12-01 05:09:37Z

1

Try something like this:-

 $("#parent_div").append('<div id="created_div"></div>');

answered Dec 1, 2012 at 5:09

Rahul Tripathi

173k33 gold badges292 silver badges341 bronze badges

2 Comments

Vivek Dragon Over a year ago

i want to add a div externally from html page.

Rahul Tripathi Over a year ago

Check this out:- dynamicdrive.com/forums/…

Collectives™ on Stack Overflow

Adding a div dynamically using append()

3 Answers 3

2 Comments

1 Comment

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

2 Comments

1 Comment

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related