Come aggiungere bambino prima. prototipo

Question

Sto realizzando un sito Web con la libreria javascript. Se l'utente seleziona un'opzione in una casella a discesa (seleziona), è necessario aggiungere un'etichetta e una casella di testo. Questo lo faccio con l'opzione appendChild. L'unico problema con l'opzione appenChild è che gli elementi devono sempre essere aggiunti dopo gli elementi nell'elemento usato. Questo è il mio codice:

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);

Qui il contenitore è l'elemento in cui è necessario aggiungere gli elementi. L'unico problema è che gli elementi vengono aggiunti alla fine dell'elemento e voglio aggiungere gli elementi all'inizio dell'elemento html.

Answer 1

Oltre a appendChild , i nodi DOM hanno un insertBefore metodo

container.insertBefore(newFreeformLabel, container.firstChild);

Answer 2

Usa Element.insert (elemento, contenuto) .

Answer 3

container.prepend(newChild);

Questo è stato aggiunto in ES5. È JS vaniglia e attualmente disponibile in 90% dei browser , inclusi Chrome, FF e Opera.

Inoltre, newFreeformLabel.after (newFreeformField); ti permetterebbe di inserire in ordine, se lo desideri. .before è anche un'opzione

Link: developer.mozilla.org - Polyfill

Answer 4

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')
    });

Penso che Element.insert di Prototype sia in qualche modo imbarazzante per prima di / dopo , comunque. Ad esempio, se si desidera posizionare il .spacer prima del .textfield , più avanti nel codice, è necessario eseguire qualcosa del tipo:

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

Questo è, specialmente se hai familiarità con Element.insertBefore dell'API DOM, un po 'poco intuitivo, poiché non stai inserendo il .spacer nel .textfield , ma invece nel contenitore , prima del .textfield .

Answer 5

Se avessi visto la soluzione di Gareth in tempo, potrei andare avanti con quello, com'era usato:

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

poiché la funzione insert () di Prototypes stava restituendo un errore in IE8 ..