Best way to insert an element with JavaScript

Question

I have an HTML form consisting of several fields (each has the same fields). I want users to be able to add additional fields by clicking the (jQuery) button. I can imagine two approaches:

• Create a dummy hidden set of fields and clone it when you click the add button.

• Create a function that displays HTML code in a field from a string when you click the add button. (The function knows the set of fields as a long string.)

Are there any significant advantages or disadvantages that can be applied? Is there another way?

I don’t like the idea that the dangling widget is around, even if it is hidden, but encodes the entire set of fields as a string, it seems a little unthinkable, although I know that this is a fairly standard practice.

Answer 1

Even if the existing field sets are identical to the ones you want to insert, you can clone the existing field set and clear the inputs. Now you do not need to have additional code in HTML or Javascript :)

Answer 2

() , , JavaScript, "" . , .

, HTML, , - JavaScript.

, .

Answer 3

, DOM:

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);

, , DOM.

Answer 4

node, , (, ) .

, .

Answer 5

, , name. , .

Answer 6

async. , , .

, . , , . , , .

# 1 - , HTML, JS.

Answer 7

jQuery, , clone().

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

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