Meilleur moyen d'insérer un élément avec JavaScript

Question

J'ai un formulaire HTML composé de plusieurs champs (chacun ayant des champs identiques). Je souhaite que les utilisateurs puissent ajouter des ensembles de champs supplémentaires en cliquant sur un bouton (jQuery). Je peux penser à deux approches:

1. Créer un mannequin et fieldset clone it caché lorsque le bouton ajouter est cliqué.

2. Créez une fonction qui rend le code HTML du fieldset à partir d'une chaîne lorsque vous cliquez sur le bouton add. (La fonction connaît le fieldset comme une longue chaîne.)

Y a-t-il des avantages ou des inconvénients significatifs? Y a-t-il un autre moyen? Je n'aime pas l'idée d'un jeu de champs fictif qui traîne, même s'il est caché, mais encoder tout le fieldset en tant que chaîne semble un peu bizarre, même si je sais que c'est une pratique plutôt courante.

Answer 1

Si même les jeux de champs déjà présents sont identiques à ceux que vous souhaitez insérer, vous pouvez cloner un jeu de champs existant et effacer les entrées. Vous ne devez pas avoir le code supplémentaire dans le code HTML ou Javascript :)

Answer 2

Vous pouvez charger le nouveau fieldset à partir d'une source asynchrone. C'est probablement exagéré si le fieldset n'est pas compliqué.

Vous avez dit que les fieldsets étaient tous identiques. Si vous chargez la page avec un ou plusieurs jeux de champs visibles, vous pouvez en cloner un, ce qui évite d'avoir un jeu de champs caché dans la page. Vous devez effacer toutes les données qui se trouvaient dans le fieldset avant de l'afficher. Parmi vos options, je choisirais # 1 pour la facilité de la maintenance - si vous décidez plus tard d'ajuster la mise en forme des fieldsets, il est plus facile de le changer dans le HTML que dans une chaîne JS non magique.

Answer 3

Vous pouvez cloner le nœud existant que vous souhaitez copier, modifier les attributs appropriés (comme le nom), puis l'insérer dans la page .

Aucune raison de cloner un mannequin, il suffit de cloner l'existant.

Answer 4

J'ai utilisé la première approche (clonage) dans le passé, sauf que j'ai effectivement supprimé le bloc de gabarit du document en utilisant JavaScript afin qu'il ne soit pas "suspendu". Vous pouvez ensuite réutiliser le bloc de modèle en clonant le bloc supprimé et en ajoutant le clone dans le document. L'avantage de l'approche par blocs de gabarit est que vous conservez ensuite le balisage dans le document HTML, où il est plus facile à gérer et à mettre à jour que dans un code JavaScript codé quelque part.

Espérons que cela aide.

Answer 5

Vous pouvez créer un fieldset à partir de zéro lorsque le bouton est pressé à l'aide des méthodes 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); 

Je l'admets est bavard, mais c'est DOM pour vous.

Answer 6

Étant donné que vous utilisez jQuery et que vos ensembles de champs sont identiques, vous pouvez utiliser la fonction clone().

vous pouvez donc faire

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

ou dans une autre séquence

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

Answer 7

Je pense que le problème est que je veux sérialiser l'entrée name attributs. Autrement je voudrais avoir un fieldset caché et le cloner celui-là, j'obtiendrais alors l'index des entrées et écrirais les attributs de nom.