Comment ajouter un enfant avant. prototype

Question

Je fais un site avec la bibliothèque javascript. Si l'utilisateur sélectionne une option dans une boîte déroulante (sélection), il doit ajouter une étiquette et une zone de texte. C'est ce que je 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é. Ceci 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 le conteneur est l'élément où les articles doivent être ajoutés. Le seul problème est que les éléments sont ajoutés à la fin de l'élément et je veux ajouter les éléments au début de l'élément html.

Answer 1

En plus appendChild, les noeuds DOM ont une méthode insertBefore

container.insertBefore(newFreeformLabel, container.firstChild); 

Answer 2

Utilisez Element.insert(element, content).

Answer 3

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 de Element.insert est un peu gênant pour before/after, cependant. Par exemple, si vous vouliez placer le .spacer avant la .textfield, quelque temps plus tard dans votre code, vous devez faire quelque chose comme:

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

Ceci est, surtout si vous êtes familier avec Element.insertBefore de l'API DOM, quelque peu imprévisible, comme vous êtes pas en insérant le .spacer dans le .textfield, mais à la place dans le container, avant le .

Answer 4

Si je l'avais vu la solution de Gareth à temps, je pourrais aller avec cela, comme il était je:

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

car la fonction insert() de Prototypes renvoyait une erreur dans IE8.

Answer 5

container.prepend(newChild); 

a été ajouté dans ES5. Il est vanillé JS et actuellement disponible en 70% of browsers, y compris Chrome, FF et Opera.

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

Liens: developer.mozilla.org - la question Polyfill