Best Way to Insert An Element With JavaScript

Question

I have an HTML form which consists of several fieldsets (each has identical fields). I want users to be able to add additional fieldsets by clicking a button (jQuery). I can think of two approaches:

1. Create a dummy hidden fieldset and clone it when the add button is clicked.

2. Create a function that renders the fieldset's HTML from a string when the add button is clicked. (The function knows the fieldset as a long string.)

Are there any significant advantages or disadvantages to either appoach? Is there another way?

I don't love the idea of a dummy fieldset hanging around, even if it's hidden, but encoding the whole fieldset as a string seems a little unweildy, though I know it's pretty standard practice.

Answer 1

If even the fieldsets that are already present are identical to the one you'd like to insert, you can clone an existing fieldset and clear the inputs. Now you don't have to have the extra code in the HTML or Javascript :)

Answer 2

I have used the first approach (cloning) in the past, except that I actually removed the template block from the document using JavaScript so that its not "hanging" around. You can then just reuse the template block as needed by cloning the removed block and adding the clone back into the document.

The benefit with the template block approach is that you then keep the markup in the HTML document where it is easier to manage and keep updated than in encoded JavaScript somewhere.

Hope this helps.

Answer 3

You could create a fieldset from scratch when the button is pressed using DOM methods:

function createFieldset(legendText, prefix) {
    var fieldset = document.createElement("fieldset");
    var legend = fieldset.appendChild( document.createElement("legend") );
    legend.appendChild( document.createTextNode(legendText) );

    var input = document.createElement("input");
    input.type = "text";
    input.name = prefix + "_some_text_field";

    return fieldset;
}

var fieldset = createFieldset("Test fields", "test");
document.forms[0].appendChild(fieldset);

I admit this is verbose, but that's DOM for you.

Answer 4

You can clone the existing node you want to copy, change the appropriate attributes (like name) and then insert it into the page.

No reason to clone a dummy, just clone the existing one.

Answer 5

I think the issue is that I'd want to serialize the input name attributes. Otherwise i'd go with having a hidden fieldset and cloning that one, I'd then get the index of the inputs and write the name attributes.

Answer 6

You could load the new fieldset from an async source. This is probably overkill if the fieldset isn't complicated.

You said the fieldsets were all identical. If you load the page with one or more visible fieldsets, you could clone one of those, which would avoid having a dummy hidden fieldset in the page. You would have to clear any data that was in the fieldset before displaying it though.

From your options, I would pick #1 for ease of maintenance--if you decide later to adjust the formatting of the fieldsets, it's easier to change it in the HTML than in an unweildy JS string.

Answer 7

Since you are using jQuery and your fieldsets are identical you can use the handy clone() function..

so you could just do

$( 'form' ).append( $('fieldset:eq(0)').clone() );

or in another sequence

$('fieldset:eq(0)').clone().appendTo( 'form' );