CODEWITHSUNDEEP
jqueryhtml
JD Audi
JD Audi

Reputation: 1055

Add Div Dynamically using JQuery

I'm not sure if this would be the best option.. But I want the option that when the user clicks a button, it will add another div or li.

I am going to allow users to upload documents, but multiple ones. I'd like to for the user to be able to click a button, and a new <div> or <li> is generated with predefined code. Is this possible?

Here's a fiddle..

http://jsfiddle.net/AHvwP/1/

Upvotes: 14

Views: 83050

Answers (5)

Matt Ryan
Matt Ryan

Reputation: 1717

You can add a new element to an existing parent like so:

select the element to added the new <div>/<li> to and use .append()

$("#id").append("<div>foo</div>");

http://api.jquery.com/append/

Alternatively, you can use the .html()

http://api.jquery.com/html/

Upvotes: 4

dhana govindarajan
dhana govindarajan

Reputation: 226

$("input[type=submit]").click(function(){
    $("<li />").html("item").appendTo("ul");
})

You can create elements using $("<tag />") and set attributes, add classes and so on. Then append where you want.

Upvotes: 0

Jeremy Battle
Jeremy Battle

Reputation: 1638

If this is to allow for multiple file uploads, have you considered using something like http://www.uploadify.com/ the jQuery plugin? It allows multiple file uploads from one dialog window and you wouldn't need to worry about this.

Upvotes: 1

theabraham
theabraham

Reputation: 16360

Try this:

$('.button').click(function() {
    $('#myContainer').append('<div>the new guy</div>');
});

Upvotes: 17

BrunoLM
BrunoLM

Reputation: 100322

Your example updated on jsFiddle

$("input[type=submit]").click(function(){
    $("<li />").html("item").appendTo("ul");
})

You can create elements using $("<tag />") and set attributes, add classes and so on. Then append where you want.

Upvotes: 12

Related Questions