web-dev-qa-db-fra.com

Comment ajouter un enfant avant. prototype

Je crée un site avec la librairie javascript. Si l'utilisateur sélectionne une option dans une liste déroulante, une étiquette et une zone de texte doivent être ajoutées. 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 de l'élément used. 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 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 veux ajouter les éléments au début de l'élément html.

javascripthtmlprototypejs
30
Ivo Trompert

En plus de appendChild, les nœuds DOM ont une méthode insertBefore

container.insertBefore(newFreeformLabel, container.firstChild);
93
Gareth

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

8
Glavić
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 Element.insert de Prototype est quelque peu gênant pour before/after, cependant. Par exemple, si vous souhaitez placer le .spacer avant le .textfield, un peu plus tard dans votre code, vous devrez procéder de la manière suivante:

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

C'est particulièrement le cas si vous connaissez le Element.insertBefore de l'API DOM, quelque peu intuitif, car vous insérez pas l'insertion du .spacer dans le .textfield, mais plutôt dans le container, avant le .textfield .

1
eyelidlessness
container.prepend(newChild);

Cela a été ajouté dans ES5. Il s'agit de Vanilla JS et actuellement disponible dans 70% des navigateurs , y compris Chrome, FF et Opera.

De plus, newFreeformLabel.after(newFreeformField); vous permettrait d'insérer dans l'ordre, si vous le souhaitez. .before est aussi une option

Liens: developer.mozilla.org - Polyfill

0
Gibolt

Si j'avais vu la solution de Gareth à temps, je pourrais y aller, comme c'était mon cas:

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

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

0
jazkat