Javascript 是否可以使用.appendChild（）将元素插入元素的开头？

如果用户在下拉框中选择选项，则必须添加标签和文本框。使用

appendChild

，这些元素被添加到

容器的末尾

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

问题是这些元素应该插入到
容器的开头，而不是末尾

PrototypeJS中是否有解决方案？
使用

然而，我认为Prototype的
元素insert对于
之前的
/
之后的
来说有点笨拙。例如，如果要将
.spacer
放在
.textfield
之前，则需要稍后在代码中执行以下操作：

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

如果您熟悉DOM API的
元素.insertBefore
，这就显得有些不直观，因为您不是将
.spacer
插入
.textfield
，而是插入
容器中，在
.textfield
以及
appendChild
之前，DOM节点有一个方法

如果我及时看到加雷斯的解决方案，我可能会按照我的习惯去做：

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

由于原型的insert（）函数在IE8中返回错误。
Modern Solution
要将子项添加到父项的开头，请使用
prepend

parent.prepend(newChild)

parent.append(newChild)

要在父项末尾添加，请使用
append

parent.prepend(newChild)

parent.append(newChild)

此外，如果要添加相对于另一个子项的关系，请使用以下选项之一：

child1.after(newChild)  // [child1, newChild, child2]

child1.before(newChild) // [newChild, child1, child2]

高级用法
您可以传递多个值（或使用扩展运算符
…
）
任何字符串值都将作为文本元素添加
示例：

parent.prepend(newChild, "foo")  // [newChild, "foo", child1, child2]

const list = ["bar", newChild]
parent.append(...list, "fizz")  // [child1, child2, "bar", newChild, "fizz"]

-
child.replacetwith


问题被标记为prototypejs，因此这确实应该是正确的答案。请注意，如果容器中没有任何元素，这也可以使用。使用该解决方案，您将丢失所有事件此答案有效，第一个答案对我无效