How to add more divs in jQuery

Question

I am trying to add a new div to the page when you click on NEW DIV?

How could I do this? Can someone point me in the right direction?

Answer 1

More example code is always helpful, but I'll try to give you some basics.

<div id="Content">
  <button id="Add" />
</div>

$(function () {
  $('#Add').click(function () {
    $('<div>Added Div</div>').appendTo('#Content');
  });
});

Answer 2

There are a bunch of different ways, it depends on what you want to do. A simple way is like this:

$('#id').html('<div>Hello</div>')

Which replaces the inner html of item with id 'id' with "Hello". So this:

<div id='id'>Old Html </div>

Would become:

<div id='id'><div>Hello</div></div>

And this:

$('#id').after('<div>Hello</div>')

Would transform the "Old Html" into this:

<div id='id'>Old Html</div>
<div Hello </div>

Check out www.visualjquery.com and select the Manipulation button. It gives you more than you could need to know in an easy to explore fashion.

Answer 3

Make sure to use the $(document).ready function in jQuery. You need this to "run" the script once your page is loaded and enable the action that is being called on this dummy button to append a new div to an existing div.

You can also use this to append anything you'd like to other elements on the page by using jQuery selectors such as .class or #id.

<div id="Content">
  <button id="Add" />
</div>

$(document).ready(function() {
    $('#Add').click(function () {
    $('<div>Added Div</div>').appendTo('#Content');
  });
});

Another useful option is to replace the contents of a tag with jQuery. You can do this using the .html() function.

<div id="Content">
      <p id="changed">Hello World!</p>
      <button id="change_content" />
</div>

$(document).ready(function() {
    $('#change_content').click(function () {
        $('#changed').html('Goodbye World');
    });
});

Hope this helps!