Adding html content dynamically to the page

Question

I have the following div. That need to be added whenever i click on the button/link

<div class="add_dependent" style="display: none;">
            <div class="dependent_content">
                <span>
                    <strong>Dependent<span class="divcount"></span></strong>
                </span><span class="delete">Delete</span>
                <div><strong>Relationship to you</strong></div>
                <div>
                    <input type="radio" value="0" name="relationship" class="dependent-relation" />
                    <label>Partner</label>
                    <input type="radio" value="1" name="relationship" class="dependent-relation"/>
                    <label>Child under21</label>
                    <input type="radio" value="2" name="relationship" class="dependent-relation"/>
                    <label>dependent over21</label>
                </div>
                <div><strong>Date of birth</strong></div>
                <div>
                    <input type="text" id="dependent-dob" name="dependent-dob" datepicker/>
                    <input type="hidden" id="dependent-id" name="dependent-id" />

                </div>
            </div>
        </div>
        <a href="" id="add" ><img src="../../Content/themes/base/images/addnew_depnt.png" style="border: 0px;" alt="add dependent"></a>

Initially this div will be hidden. This div has to be added dynamically every time i click on link (Add dependent), and the div id of parent div should be assigned with dependent+id(1,2,3...).

I have used following script to work this, but the data entered in dependent1 is cloned in subsequent divs.

$("body").delegate("#add", "click", function () {
        var total_length = $(".add_dependent").length
        $(".add_dependent:eq(0)").clone().prependTo("#dependent-details").css("display", "inline");

        $(".add_dependent:last-child .divcount").append(total_length)

        $(".divcount").each(function (index) {
            var increment = index + 1
            $(this).parents(".add_dependent").attr("id", "depend" + increment)
            $(this).text(increment)

        });
    })

How to add the above html elements to existing page whenever i click on the add dependent link?

Could anybody help me on this???

can you create a jsfiddle for this, will be easy to rectify your problem if any :) jsfiddle.net — dreamweiver
– dreamweiver, Commented Jul 22, 2013 at 13:27
Whenever i click on the add dependent, this div has to be added to the existing div. How i can do this? — PaRsH
– PaRsH, Commented Jul 22, 2013 at 13:30

verbanicm · Accepted Answer · 2013-07-22 13:39:24Z

2

You can use the append function and take the html from a template div and inject it to another div for rendering

$("#renderDiv").append($("#templateDiv").html());

Fiddle: http://jsfiddle.net/Zz6wU/2/

answered Jul 22, 2013 at 13:39

verbanicm

2,5461 gold badge16 silver badges9 bronze badges

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

3 Comments

PaRsH Over a year ago

Thanks. Its worked. but i have another problem now. I have radio buttons inside that div. How i can give different name to each group. Now all the radio buttons name has set to "relationship". How i can resolve this. ?

verbanicm Over a year ago

You may want to have a look at a javascript templating library, I prefer to use handlebars (handlebarsjs.com).

verbanicm Over a year ago

If you dont want to use templating, i updated the fiddle to show how to loop through each div to get all the variable and you can send them off that way. jsfiddle.net/Zz6wU/3

Yabada · Accepted Answer · 2013-07-22 13:34:52Z

1

From the comment "Whenever i click on the add dependent, this div has to be added to the existing div. How i can do this?" :

$("#baseDiv").append($("#newDiv").html());

Not sure that's what you want

answered Jul 22, 2013 at 13:34

Yabada

1,7581 gold badge16 silver badges36 bronze badges

Collectives™ on Stack Overflow

Adding html content dynamically to the page

2 Answers 2

3 Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

3 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related