JavaScript: ajouter l'élément d'entrée de courant div

J'ai une fonction javascript qui ajoute un div avec trois entrées à la page et un lien pour ajouter plusieurs entrées pour le même div (Imaginons que l'utilisateur ne sait pas combien de champs, il y aura donc il peut ajouter de façon dynamique).

var div=document.createElement("div");
div.innerHTML='<input type="text" name="question" /><br><br>'+
              '<input type="text" name="input1"/><br />'+
              '<input type="text" name="input2"/><br />'+
              '<a href="javascript:addInput()">Add input field</a>';

var parent_div=document.getElementById('dinamicni_div');
parent_div.appendChild(div);

Comment pourrais-je maintenant de mettre en œuvre cette addInput() pour ajouter une entrée au-dessous de la dernière entrée (actuellement input2) dans la même div (mais, par-dessus le lien)?

Juste pour faire clair j'ai deux fonctions JS pour générer du contenu dynamique: addDiv(), que vous pouvez voir ci-dessus raccourcie; et addInput() que je voudrais mettre en oeuvre et il devrait ajouter une entrée dans le courant de la div, où le lien a été cliqué.

Pourrions-nous voir la fonction que vous essayez d'améliorer?
Il n'est pas encore mis en œuvre, mais maintenant que j'ai eu les conseils, je suis hors de sa mise en œuvre 🙂

OriginalL'auteur Primož Kralj | 2012-04-21

1

Vous pouvez ajouter un div qui contient les champs de saisie à l'intérieur de la div que vous avez créé, puis il serait facile d'ajouter de nouveaux éléments en ajoutant childs comme vous l'avez fait avant.

Merci, ce serait la plus élégante de répondre de mon point de vue. Je vais utiliser ceci ou jQuery solution.
Vous pouvez combiner la mise en page et de jQuery pour faire simple et élégante 🙂
Bien à l'aide de jQuery ne sera pas aussi simple que j'ai travaillé avec elle brièvement il y a quelques années 🙂

OriginalL'auteur Juan Alberto López Cavallotti
5

Essayer
```
document.getElementById('yourdiveID').innerHTML += "<input type='text' value='' /><br />";
```
Il va ajouter à la fin de la div.

Cette méthode permettra d'ajouter des commentaires APRÈS le lien et je le veux avant - sauf si les entrées sont dans leur propre div. Merci

OriginalL'auteur Shehzad
3

donner votre lien à une classe ou un id et d'insérer à l'aide de cette méthode: http://api.jquery.com/insertBefore/

edit:

je suis d'accord, la question n'était pas à propos de jquery, mais le demandeur a laissé entendre, que ses exigences ne le lui permettent, et par souci d'exhaustivité, voici le code en jquery (pour prendre les affiches injustifiée de l'intimidation de l'apprentissage de jquery)
```
function createInputMethod(){
    return $('<input type="text" name="question" /><br><br>'+
              '<input type="text" name="input1"/><br />'+
              '<input type="text" name="input2"/><br />');
}

var div = $("<div/>");
div.append(createInputMethod());
div.append($('<a href="javascript:addInput()" id="btn">Add input field</a>');
var parent_div=$('dinamicni_div');
div.appendTo(parent_div);

function addInput(){
   createInputMethod().insertBefore("#btn");
}
```
Voyez-vous jQuery mentionnée dans la question?
C'est jQuery, certes, mais encore merci pour le mentionner, il a l'air sympa et je doit apprendre jQuery 🙂
non, mais j'ai toujours aimé les chances

OriginalL'auteur mindandmedia
1

Je voudrais faire quelque chose comme cela. Obtenir toutes les entrées. Compter le nombre d'entrées et les ajouter à l'aide de jquery after méthode. Le Code est quelque chose comme ceci:
```
function addInputMethod() {

    var len = $('div').find('input').length;


    $('input:nth-child(' + len + ')').after('<input type="text" name="input' + (len + 1) +'"/><br />'); 
}
```
MODIFIER

Si vous n'avez pas de id pour div vous pouvez modifier la longueur de cette

var len = $(this).parent().find('input').length;

Également modifier la deuxième ligne de

$(this).parent().find('input:nth-child...

Wow, c'est trop grand!
Une question cependant depuis j'ai beaucoup de ces div contenant ces entrées, comment pourrais-je savoir à partir de laquelle l'un d'eux a été j'ai redirigé la fonction (dans laquelle le lien a été cliqué)?
Tant pis; j'ai pensé à elle. Je vais juste passer un paramètre à la fonction..
J'ai mis à jour ma réponse.
édité. J'ai eu une parenthèse supplémentaires. Merci pour le trouver.

OriginalL'auteur Anji

Vous devez vous connecter pour publier un commentaire.