Como anexar a criança antes. protótipo

Question

Eu faço um site com a biblioteca JavaScript. Se o usuário selecionar uma opção em uma caixa suspensa (selecione), deverá ser adicionado uma etiqueta e uma caixa de texto. Isso eu faço com a opção ApndendChild. O único problema com a opção AppânCH é que os itens sempre serão adicionados após os itens no elemento usado. Este é o meu código:

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

Aqui o contêiner é o elemento em que os itens devem ser adicionados. O único problema é que os itens são adicionados no final do elemento e eu quero adicionar os itens no início do elemento HTML.

Answer 1

Assim como appendChild, Os nós do DOM têm um inserir antes método

container.insertBefore(newFreeformLabel, container.firstChild);

Answer 2

Usar Element.insert (elemento, conteúdo).

Answer 3

container.prepend(newChild);

Isso foi adicionado no ES5. É JS de baunilha e atualmente disponível em 90% dos navegadores, incluindo Chrome, FF e Opera.

Além disso, newFreeformLabel.after(newFreeformField); permitiria que você insira em ordem, se desejado. .before também é uma opção

Links: desenvolvedor.mozilla.org - Polyfil

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

Eu acho que protótipo Element.insert é um tanto estranho para before/after, Contudo. Por exemplo, se você quisesse colocar o .spacer antes de o .textfield, algum tempo depois no seu código, você precisaria fazer algo como:

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

Isso é, especialmente se você estiver familiarizado com a API DOM Element.insertBefore, um pouco inintivo, como você é não inserindo o .spacer no .textfield, mas em vez disso no container, antes da a .textfield.

Answer 5

Se eu tivesse visto a solução de Gareth a tempo, posso ir com isso, como era, usei:

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

Como a função insert () dos protótipos estava retornando erro no ie8 ..