<input></input> in innerHTML not working

我用javascript创建了一个下拉列表，我填充它从MySQL数据库获取数据。<input></input> in innerHTML not working

我的问题是我无法将下拉列表放在innerHTML代码中。

这是我写的创建与JS的下拉列表：

var mySpan = document.getElementById('myDiv'); 

var myLine = document.getElementById('testcat'); 
myLine.value++; 

// Create select 
var selection = document.createElement('select'); 
selection.setAttribute('name',"category[]"); 
mySpan.appendChild(selection); 

// Create Option 
createSelectOption(selection); 

// Create the container 
var ni = document.getElementById('myDiv'); 
ni.setAttribute('style', 'width:790px;'); 
........... 
...........

然后，我创建其他的事情，并创建HTML代码，我用：

newdiv.innerHTML = '<div class="table">.........</div>'; 
ni.appendChild(newdiv);

这是部分的HTML：

// test dropdown list 
<input name="testcat" id="testcat" type="hidden" value="0" /> 
<div id="myDiv"></div>

我测试了我的下拉列表，你可以在上面的代码中看到，它的工作原理如果我声明<input name="testcat" id="testcat" type="hidden" value="0" />在HTML中（我的意思是在<body></body>），但如果我在innerHTML中使用相同的代码，FireBug告诉我：“myLine为null; myLine.value ++;？”

任何帮助

来源

2012-06-21 Mark

你的HTML中是否有任何断线？另外，使用'innerHTML'使用'document.createElement'和'appendChild'方法插入HTML是非常糟糕的想法。 – antyrat

你是在**页面完成加载后执行它们吗？如果没有，它会失败 –

你试过它作为自闭标签吗？'（注意尖括号前的斜杠）？ –

不能使用innerHTML的文本分配一个ID的元素 - ID不会对DOM注册您需要先创建元素，分配给它的ID，然后把该元素在DOM

您可能会发现这更容易使用jQuery：

var input = document.createElement("input"); 
input.id="testcat"; 
input.innerHTML = "testcat" ; 
$('somediv').appendChild(input);

来源

2012-06-21 11:17:12 Robbie

这是我在我的旧代码所做的：

var selectcat = document.createElement("select"); 
selectcat.name = "category[]"; 
selectcat.options[0] = new Option("",""); 
selectcat.options[1] = new Option("cat1","cat1"); 
selectcat.options[2] = new Option("cat2","cat2"); 
.......... 
.......... 
selectcat.options[12] = new Option("cat1","cat12");

而且使用：

newdiv.innerHTML = '<div class="table"><ul><li><select name="category[]"><option value=""></option><option value="cat1">cat1</option><option value="cat2">cat2</option></select></li></ul></div>';

但现在我不得不从MySQL数据库中获取值。

所以我创造了这个功能：

function createSelectOption(element) 
    { 
     var objSelect = ele; 
     var Item = new Option("", ""); 
     objSelect.options[objSelect.length] = Item; 
     <? 
     while($categ = mysql_fetch_array($resultf_categ)) 
     { 
     ?> 
      var Item = new Option("<?=$categ["cat_name"];?>", "<?=$categ["cat_name"];?>"); 
      objSelect.options[objSelect.length] = Item; 
     <? 
     } 
     ?> 
    }

但还是不明白怎么才能在我的innerHTML直接使用。对不起，这些愚蠢的问题，但我真的很困扰这里。

来源

2012-06-21 12:00:26 Mark

好吧，我重写了整个代码，删除了innerHTML，现在我排序了。给我一些时间来清理代码，我会发布我的解决方案。谢谢大家的提示，特别是antyrat和罗比，谢谢。 – Mark

按照提示，我重写了函数，删除了innerHTML，并创建了所有输入字段和下拉列表，如下所示： '//创建输入文本（图像的名称） var namePic = document.createElement（'input' ）; namePic.setAttribute（'type'，“text”）; namePic.setAttribute（'name'，“name []”）; namePic.setAttribute（'id'，“img_name”+ myLine.value）; mySpan.appendChild（namePic）; \t //创建select（DropDown List - Category） var cat = document.createElement（'select'）; cat.setAttribute（'name'，“category []”）; cat.setAttribute（'id'，“category”+ myLine.value）; mySpan.appendChild（cat）;' – Mark

<input></input> in innerHTML not working

回答

相关问题