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样式告诉标签向左浮动。

Answer 2

首先，您的函数名为addComponents()，但您使用addFilter()。我刚刚尝试了您的代码并将addFilter()更改为addComponents()，并且标签已正确设置。

Answer 3

在正确命名函数时，可以正常使用chrome：

http://jsfiddle.net/AlienWebguy/bVzwr/

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

3 个答案: