我可以使用 .appendChild() 将元素插入到元素的开头吗？答案

【问题标题】：Can I insert elements to the beginning of an element using .appendChild()?我可以使用 .appendChild() 将元素插入到元素的开头吗？
【发布时间】：2010-10-11 17:04:22
【问题描述】：

如果用户在下拉框中选择一个选项，则必须添加一个标签和一个文本框。使用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 中有解决方案吗？

【问题讨论】：

标签： javascript html prototypejs

【解决方案1】：

除了appendChild，DOM 节点还有一个insertBefore 方法

container.insertBefore(newFreeformLabel, container.firstChild);

【讨论】：

请注意，如果容器内没有任何元素开始，这也有效。

【解决方案2】：

现代解决方案

要将子代添加到父代的开头，请使用prepend

parent.prepend(newChild)

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

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"]

Related DOM method - child.replaceWith

Documentation

Can I Use

【讨论】：

这个答案有效，第一个答案对我不起作用

【解决方案3】：

使用Element.insert(element, content)。

【讨论】：

问题被标记为prototypejs，所以这应该是正确的答案。

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

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

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

【讨论】：

【解决方案5】：

如果我能按时看到 Gareth 的解决方案，我可能会接受，因为我曾经使用过：

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

因为 Prototypes 的 insert() 函数在 IE8 中返回错误..

【讨论】：

使用该解决方案您会丢失所有事件