IE7 故障与 appendChild() 输入框

Posted

技术标签:

【中文标题】IE7 故障与 appendChild() 输入框【英文标题】:IE7 glitch with appendChild() for an input box 【发布时间】:2010-12-31 22:34:03 【问题描述】:

我正在使用以下 javascript 根据下拉菜单中的数字添加多个输入。它在 Firefox 和 chrome 中运行良好,但在 IE7 中,输入全部浮动在新行上。

function add(number) 

var foo = document.getElementById("listInputs2");
var count = 1;
foo.innerhtml = "";

while ( count <= (number) )

//Create an input type dynamically.
var element = document.createElement("input");

//Assign different attributes to the element.
element.setAttribute("name", "value"+count);
element.setAttribute("id", "value"+count);
element.setAttribute("size", "60");
element.setAttribute("type", "text");
element.setAttribute("value", "");

//Append the element in page (in span).
foo.innerHTML+=('<li class="inputCount"><label for="value'+count+'">#'+count+'</label>');
foo.appendChild(element);
foo.innerHTML+=("</li>");
count += 1;



【问题讨论】:

【参考方案1】:

我在 Firefox 中遇到了同样的错误:您将输入添加为 listInput2 的子项,而不是 li 的子项。

这是一段有效的代码:

function add(number) 

var foo = document.getElementById("listInputs2");
var count = 1;
foo.innerHTML = "";

while ( count <= (number) )

//Create an input type dynamically.
var input = "<input name='value"+count+"' id='value"+count+"' size='60' type='text' value=''>";

//Append the element in page (in span).
foo.innerHTML+='<li class="inputCount"><label for="value'+count+'">#'+count+'</label>'+input+'</li>';
count += 1;



【讨论】:

以上是关于IE7 故障与 appendChild() 输入框的主要内容,如果未能解决你的问题,请参考以下文章

javascript中document.appendChild和document.body.appendChild的问题

IE6IE7IE8及其他浏览器多个元素并排显示

IE7 中的组合框行为

h5输入框加载手机键盘超时卡死

在 IE7 或 IE8 中使用表单元素获得统一的布局

JQuery Autocomplete 与 IE7 的兼容性