我可以使用.appendChild（）将元素插入到元素的开头吗？

Question

如果用户在下拉框中选择一个选项，则必须添加标签和文本框。使用appendChild，这些元素将添加到container的末尾。

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

问题是这些元素应插入到container的开头，而不是结尾。

PrototypeJS中对此有解决方案吗？

Answer 1

以及appendChild，DOM节点也具有insertBefore方法

container.insertBefore(newFreeformLabel, container.firstChild);

Answer 2

使用Element.insert(element, content)。

Answer 3

Element.insert(element, content)

这是在ES5中添加的。它是香草JS，目前在container.prepend(newChild); 中可用，包括Google Chrome，Firefox，Opera和Safari。

此外，如果需要，91% of browsers将允许您按顺序插入。 newFreeformLabel.after(newFreeformField);也是一个选项

链接：.before-developer.mozilla.org

Answer 4

Polyfill

但是我认为原型的

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

对于Element.insert / before有点尴尬。例如，如果您想将after放置在.spacer之前，则在代码的某些时候，您需要执行以下操作：

.textfield

这是，尤其是如果您熟悉DOM API的

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

，有点不直观，因为not将Element.insertBefore插入.spacer，而不是.textfield，< [之前 container。

Answer 5

如果我准时看到了Gareth的解决方案，我可能会同意，因为它曾经使用过：

.textfield

作为原型的insert（）函数在IE8中返回错误。