Лучший способ вставить элемент с JavaScript

Question

У меня есть HTML-форма, состоящая из нескольких полей (каждая из которых имеет одинаковые поля). Я хочу, чтобы пользователи могли добавлять дополнительные поля, нажав кнопку (jQuery). Я могу думать о двух подходов:

1. Создать фиктивный скрытый Fieldset и clone it когда добавить кнопка нажата.

2. Создайте функцию, которая выводит HTML-код поля из строки при нажатии кнопки . (Функция знает набор полей как длинную строку.)

Есть ли какие-либо существенные преимущества или недостатки для приложения? Есть ли другой способ?

Мне не нравится мысль о том, что манекен-полевой набор висит вокруг, даже если он скрыт, но кодирует весь набор полей, поскольку строка кажется немного неумелой, хотя я знаю, что это довольно стандартная практика.

Answer 1

Если даже уже имеющиеся наборы полей идентичны тем, которые вы хотели бы вставить, вы можете клонировать существующий набор полей и очищать входы. Теперь вам не нужно иметь дополнительный код в HTML или Javascript :)

Answer 2

Вы можете загрузить новый набор полей из асинхронного источника. Вероятно, это слишком сложно, если набор полей не является сложным.

Вы сказали, что все поля были одинаковыми. Если вы загружаете страницу одним или несколькими видимыми полями, вы можете клонировать один из них, что позволит избежать наличия скрытого скрытого набора полей на странице. Вы должны были бы очистить все данные, которые были в наборе полей, прежде чем отображать его.

Из ваших возможностей я бы выбрал # 1 для удобства обслуживания - если позже вы решите настроить форматирование полей, его легче изменить в HTML, чем в неразрывной строке JS.

Answer 3

Вы можете клонировать существующий узел, который хотите скопировать, изменить соответствующие атрибуты (например, имя), а затем вставить его на страницу ,

Нет причин клонировать манекен, просто клонировать существующий.

Answer 4

Я использовал первый подход (клонирование) в прошлом, за исключением того, что я фактически удалил блок шаблона из документа с помощью JavaScript, чтобы он не «висел» вокруг. Затем вы можете просто повторно использовать блок шаблонов по мере необходимости, клонировав удаленный блок и добавив клон обратно в документ.

Преимущество с использованием подхода к блоку шаблонов заключается в том, что вы сохраняете разметку в документе HTML, где легче управлять и поддерживать обновление, чем где-либо в кодированном JavaScript.

Надеюсь, это поможет.

Answer 5

Вы можете создать Fieldset с нуля при нажатии кнопки с помощью методов 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 6

Поскольку вы используете jQuery, а ваши поля идентичны, вы можете использовать удобную функцию clone().

так что вы можете просто сделать

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

или в другой последовательности

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

Answer 7

Я думаю, что проблема в том, что я хочу, чтобы сериализации на вход name атрибутов. В противном случае у меня будет скрытый набор полей и клонирование этого, я бы получил индекс входов и написал атрибуты имени.