如何追加孩子之前.原型

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

这里容器是必须添加项目的元素.唯一的问题是项目被添加到元素的末尾,我想在html元素的开头添加项目.

Answer 1

同样appendChild,DOM节点有一个insertBefore方法

container.insertBefore(newFreeformLabel, container.firstChild);

Answer 2

使用Element.insert(元素,内容).

Answer 3

container.prepend(newChild);

这是在ES5中添加的。它是Vanilla JS，目前在91％的浏览器中可用。

另外，newFreeformLabel.after(newFreeformField);如果需要，可以让您按顺序插入。.before也是一个选择

链接：developer.mozilla.org - Polyfill