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.

  • Comment désactiver Cufon sur certains éléments?
  • Chargement des données d3 csv
  • Comment puis-je remplir une liste déroulante en sélectionnant la valeur à partir d'une autre liste déroulante?
  • Cliquez sur div
  • Comment puis-je utiliser les événements de pointeur pour réagir uniquement à l'événement de défilement?
  • Manipuler le menu jquery sur le redimensionnement pour une mise en page réactive
  • Y at-il une raison pour laquelle les développeurs JavaScript n'utilisent pas Array.push ()?
  • Télécharger Largefile to Azure Blob en utilisant Javascript
  • Les résultats de JQuery Ajax Post dans 500 Internal Server Error
  • JQuery - utilisez l'élément avec DOMNodeInserted
  • Comment effacer rapidement un objet Javascript?
  • La variable d'utilisation Javascript comme nom d'objet
  • 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.