Wie man ein Kind vorher anhält. Prototyp

Question

Ich mache eine Website mit der JavaScript -Bibliothek. Wenn der Benutzer eine Option in einem Dropdown -Feld (auswählen) auswählt, muss ein Etikett und ein Textfeld hinzugefügt werden. Das mache ich mit der Appendchild -Option. Das einzige Problem mit der Appenchild -Option besteht darin, dass die Elemente nach den Elementen im gebrauchten Element immer hinzugefügt werden. Dies ist mein 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);

Hier ist Container das Element, in dem die Elemente hinzugefügt werden müssen. Das einzige Problem ist, dass die Elemente am Ende des Elements hinzugefügt werden und ich die Elemente am Anfang des HTML -Elements hinzufügen möchte.

Answer 1

Ebenso gut wie appendChild, Dom -Knoten haben eine Einfügen vor Methode

container.insertBefore(newFreeformLabel, container.firstChild);

Answer 2

Verwenden Element.insert (Element, Inhalt).

Answer 3

container.prepend(newChild);

Dies wurde in Es5 hinzugefügt. Es ist Vanille -JS und derzeit erhältlich in 90% der Browser, einschließlich Chrome, FF und Oper.

Zusätzlich, newFreeformLabel.after(newFreeformField); Wenn Sie gewünscht sind, können Sie in der Reihenfolge einfügen. .before ist auch eine Option

Links: Entwickler.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')
    });

Ich denke, Prototypen Element.insert ist etwas unangenehm für before/after, jedoch. Zum Beispiel, wenn Sie das platzieren wollten .spacer Vor dem .textfield, Einige Zeit später in Ihrem Code müssten Sie so etwas tun wie:

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

Dies gilt, insbesondere wenn Sie mit den DOM -API vertraut sind Element.insertBefore, etwas unintuitiv, wie Sie sind nicht Einfügen des .spacer in die .textfield, aber stattdessen in die container, Vor das .textfield.

Answer 5

Wenn ich Gareths Lösung pünktlich gesehen hätte, könnte ich damit gehen, da ich es benutzte:

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

Als Prototypes 'Insert () -Funktion wurde der Fehler in IE8 zurückgegeben.