Comment ajouter un enfant avant. prototype

Je crée un site Web avec la bibliothèque javascript. Si l'utilisateur sélectionne une option dans une boîte déroulante (sélectionner), il faut ajouter une étiquette et une zone de texte. Ceci je le fais avec l'option appendChild. Le seul problème avec l'option appenChild est que les éléments sont toujours ajoutés après les éléments dans l'élément utilisé. C'est mon code:

var newFreeformLabel = document.createElement('label'); newFreeformLabel.innerHTML = 'Omschrijving:'; var newFreeformField = document.createElement('input'); newFreeformField.className = 'textfield'; newFreeformField.name = 'factuur_orderregel[]'; var newFreeformSpacer = document.createElement('div'); newFreeformSpacer.className = 'spacer'; container.appendChild(newFreeformLabel); container.appendChild(newFreeformField); container.appendChild(newFreeformSpacer); 

Ici conteneur est l'élément où les éléments doivent être ajoutés. Le seul problème est que les éléments sont ajoutés à la fin de l'élément et je souhaite ajouter les éléments au début de l'élément html.

  • La demande AJAX prototype est envoyée en OPTIONS plutôt que dans GET; Entraîne une erreur 501
  • Comment forcer le Javascript à exécuter dans la réponse HTML à la requête Ajax
  • Comment annuler / annuler une demande en utilisant la bibliothèque prototype js?
  • Utilisation des codes d'état HTTP pour refléter la réussite / l'échec de la demande de service Web?
  • Obtenir la dernière valeur d'un tableau et le montrer sous l'axe des X
  • Quel est exactement l'extension / l'emballage DOM?
  • JSON.stringify () array bizarreness avec Prototype.js
  • Migrer de prototype en jquery
  • 5 Solutions collect form web for “Comment ajouter un enfant avant. prototype”

    Outre appendChild , les nœuds DOM ont une méthode insertBefore

     container.insertBefore(newFreeformLabel, container.firstChild); 

    Utilisez Element.insert (élément, contenu) .

     container. insert({ // key is position // 'before', 'after', 'top' and 'bottom' are allowed top: new Element('label'). update('Omschrijving:') }). insert({ top: new Element('input'). addClassName('textfield'). writeAttribute('name', 'factuur_orderregel[]') }). insert({ top: new Element('div'). addClassName('spacer') }); 

    Je pense que Prototype's Element.insert est quelque peu gênant before / after , cependant. Par exemple, si vous souhaitez placer le .spacer avant le .textfield , quelque temps plus tard dans votre code, vous devriez faire quelque chose comme:

     container. down('.textfield'). insert({ before: new Element('div'). addClassName('spacer') }); 

    C'est surtout si vous connaissez le Element.insertBefore l'API DOM, un peu intuitif, car vous .spacer pas le .spacer dans .textfield , mais plutôt dans le container , avant le .textfield .

    Si j'avais vu la solution de Gareth à temps, je pourrais y aller, car j'avais utilisé:

     $('toggle_product').innerHTML = insertContent + $('toggle_product').innerHTML; 

    Car la fonction Insertion () de Prototypes était en retour dans IE8.

     container.prepend(newChild); 

    Cela a été ajouté dans ES5. C'est vanilla JS et actuellement disponible dans 70% des navigateurs , y compris Chrome, FF et Opera.

    En outre, newFreeformLabel.after(newFreeformField); Vous permettrait d'insérer dans l'ordre, si vous le souhaitez. .before est également une option

    Liens: developer.mozilla.org – Polyfill

    JavaScript rend le site Web intelligent, beauté et facile à utiliser.