Jquery dynamic creating HTML divs on click

Question

I’m looking for some direction for my problem.

I’ve HTML divs and I want to replicate it when user clicks on span with id plus-1. This is my html

<div id = “tab”>
<div class="row">
    <div>
        <select id="ProjectsFolder0FolderId" name="data[ProjectsFolder][0][folder_id]">
            <option value="1">Project Presentation</option>
            <option selected="selected" value="4">Project Root</option>
        </select>                
    </div>
    <div>
        <div>
            <input type="text" required="required" id="ProjectsFolder0Linux" value="xyz"  name="data[ProjectsFolder][0][linux]">
        </div>           
    </div>
    <div id="plus-1" >
                <span>
                    Click here
                </span>
    </div>
</div>
</div>

Jquery

$(document).on('click', '#plus-1' , function() {
        var html = "<div class=\"row\" >"
                  ???
                 + "</div>";
    $('#tab').append(html);

        });

It is appending above html defined in jquery , but I don’t know how to append entire HTML efficiently as required above on each click.

Do you want to copy your 'plus-1' button as well?

Eternal1
– Eternal1

2014-01-29 12:30:14 +00:00
Commented Jan 29, 2014 at 12:30 — Eternal1
– Eternal1, Commented Jan 29, 2014 at 12:30

P.Sethuraman · Accepted Answer · 2014-01-29 12:54:39Z

3

Demo FIDDLE

Jquery

 $(document).on('click', '#plus-1' , function() {   
        var html = $(this).parent().clone();
        html.find('#plus-1').attr('id','plus-'+($('#tab').find('.row').length+1));
        $('#tab').append(html);
 });

answered Jan 29, 2014 at 12:54

P.Sethuraman

7153 silver badges5 bronze badges

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

1 Comment

Eternal1 Over a year ago

select and input inside cloned element will have the same ids and names with your code. Also, your cloned element plus button won't trigger anything, since its id will be different, and delegated event is only for plus-1

Eternal1 · Accepted Answer · 2014-01-29 12:59:24Z

1

Made a jsfiddle for you - http://jsfiddle.net/23GCn/. You also have an error in your html, you need to use correct parenthesis on <div id="tab">

jQuery(function($){
   var count = 1;
   $(document).on("click", "[id^='plus']", function(){             
       newBlock = $(this).parents(".row").clone();
       count += 1;

       // change id of Plus button
       newBlock.find("[id^='plus']").attr("id", "plus-"+count);

       // Change id and name of select box
       newBlock.find("select")
           .attr("id", "ProjectsFolder"+count+"FolderId")
           .attr("name", "data[ProjectsFolder]["+count+"][folder_id]");

       // Same for input
       newBlock.find("input[type='text']")
           .attr("id", "ProjectsFolder"+count+"Linux")
           .attr("name", "data[ProjectsFolder]["+count+"][linux]");

      // append new element to your tab
      $("#tab").append(newBlock);
   });    
});

Note that [id^='plus'] type selectors are very inefficient, means, slow. Consider using classes instead of ids, this way you avoid all of the code required to change ids, since you can't have elements with same id on your page obviously.

edited Jan 29, 2014 at 12:59

answered Jan 29, 2014 at 12:40

Eternal1

5,6253 gold badges34 silver badges48 bronze badges

3 Comments

Eternal1 Over a year ago

Yes. $(this) refers to clicked element. parents("row") is its <div class="row"> parent. And the clone() is a jQuery function for creating a copy of a set of matched elements. For [id^='plus'] it means select all elements, whose id attribute starts with 'plus'

Felipe Miosso Over a year ago

@Андрей Почекуев new is a reserved word.

Eternal1 Over a year ago

You mean the one you accepted. Please notice, that it produces invalid HTML, which i stated in my comment.

Collectives™ on Stack Overflow

Jquery dynamic creating HTML divs on click

2 Answers 2

1 Comment

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related