如何追加孩子之前。原型

Question

我使用javascript库制作网站。如果用户在下拉列表（选择）框中选择一个选项，则必须添加标签和文本框。这是我使用appendChild选项。 appenChild选项的唯一问题是始终在used元素中的项之后添加项。这是我的代码：

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是必须添加项目的元素。唯一的问题是项目被添加到元素的末尾，我想在html元素的开头添加项目。

Answer 1

除 appendChild 外，DOM节点还有 insertBefore 方法

container.insertBefore(newFreeformLabel, container.firstChild);

Answer 2

使用 Element.insert（元素，内容）。

Answer 3

container.prepend(newChild);

这是在ES5中添加的。它是vanilla JS，目前可在 90％的浏览器中使用，包括Chrome，FF和Opera。

此外，如果需要， newFreeformLabel.after（newFreeformField）; 将允许您按顺序插入。 .before 也是一个选项

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

我认为Prototype的 Element.insert 对于 / 之后的来说有点尴尬。例如，如果您想在 .textfield 之前放置 .spacer ，稍后在代码中，您需要执行以下操作：

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

这是特别是如果你熟悉DOM API的 Element.insertBefore ，有点不直观，因为你不插入 .spacer 进入 .textfield ，而是进入容器，之前 .textfield 。

Answer 5

如果我按时见到了Gareth的解决方案，我可能会这样做，就像我使用的那样：

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

因为Prototypes的insert（）函数在IE8中返回错误..