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(element, content)。

Answer 3

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对于before / after来说有些尴尬。例如，如果您想将.spacer放在.textfield之前，稍后在代码中，则需要执行以下操作：

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

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

Answer 4

container.prepend(newChild);

这是在ES5中添加的。它是vanilla JS，目前可在70% of browsers中使用，包括Chrome，FF和Opera。

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

链接：developer.mozilla.org - Polyfill

Answer 5

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

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

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

如何追加孩子之前。原型

5 个答案: