javascript创建的标签插入到错误的位置

Question

所以我有以下 html:

<div id="divForComponents">
       <input type="button" value="+" onclick="addFilter('divForComponents')"/>                                
</div>

在我的脚本文件中:

function addFilter(divId){
var div = document.getElementById(divId);

var label = document.createElement("label");
var text = document.createTextNode("Filter by:");
label.appendChild(text);
div.appendChild(label);

var filter = document.createElement("select");
filter.name = "selectName";
filter.options[0] = new Option("selection 1","value 1");
filter.options[1] = new Option("selection 2","value 2");
filter.options[2] = new Option("selection 3","value 3");
filter.options[3] = new Option("selection 4","value 4");
div.appendChild(filter);

var input = document.createElement("input");
input.type = "text";
input.name = "inputName";
div.appendChild(input);
}

现在选择组件和输入字段已正确添加，但标签添加在该 div 上已有的按钮之前。我希望并期望获得定位:

 Button   Label   Select    Input

相反，我得到:

 Label   Button   Select    Input

我正在测试的浏览器是 Chromium，不确定这在这里是否重要。

问候，博格丹

Answer 1

它实际上是在按钮之前插入标签还是只是在视觉上以这种方式显示？听起来您可能有一个 CSS 样式告诉标签向左浮动。