How to dynamically add Some element in HTML page

Hi there

Here is my code

What I want is onClick of add a new block of same data(name of org,Role,Year…) will be add and there is a button that will remove that block…

Don’t know how to acheieve this any help?


One way to do it is to remove templates from the page to a separate location, so that they can then be added to the page on an as-needed basis. This is a useful technique that can be used to handle multiple templates too.

Because unique identifiers have to be unique, we need to change all id attributes to class attributes too.

<div class="template">
    <div class="emp_detail">

We can retrieve any of the template areas and store them away. If they have a class name we can store them using that name, or otherwise default to template0, template1, etc.

function initTemplates() {
    $('.template').each(function () {
        var template = $(this).children(),
            key = template.attr('class') || 'template' + templates.length;
        templates[key] = template;
var templates = {};

When adding the content, we can add it to the items div

<div id="items">
//when the Add Field button is clicked
$(".add").click(function () {
    //Append a new row of code to the "#items" div

And we can watch the page for the delete buttons, and take appropriate action when they’re clicked.

$(".deletefile").click(function () {

See for a working demo based on what you had.


Thanka @Paul_Wikins this is what I want…

You saved my day thanks a lot

Although code is working fine but suddenly add tag is closing some time.

I am opening add Button on Click of a RadioButton.

Don’t know why?

Can we see the code that you’re having trouble with? HTML too please.

Check this is my Complete code of registration form

You have placed the add button inside of a form, and that button is attempting to submit the form.

You need to tell the form that it is only to be treated as a button, which is done by saying what type it is.

<button type="button" class="add">Add</button>

Awesome man you rock…

Is there any PM system in this website?

Yes there is - click on a persons name to find it.

I have clicked on name but I have not found any link for PM

You are a “new” user.
To be able to PM you’ll need to read a few other topics.

“To be able to PM you’ll need to read a few other topics.”

what this mean more post i need to post or something else?

1 Like

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.