为什么HTML数据列表的选项标签不起作用

Question

如标题所述，我在想这部分代码是否有错误：

 var td5 = document.createElement("td"); td5.innerHTML = "Locale"; tr3.appendChild(td5); var td6 = document.createElement("td"); tr3.appendChild(td6); var tdc3 = document.createElement("input"); tdc3.type = "text"; tdc3.style.width = "100%"; tdc3.setAttribute('list', 'lcl'); tdc3.id = "loc"; var tdc3a = document.createElement("datalist"); tdc3a.id = "lcl"; var lop1 = document.createElement("option"); lop1.value = "MY"; lop1.innerHTML = "MY"; var lop2 = document.createElement("option"); lop2.value = "SG"; lop2.innerHTML = "SG"; var lop3 = document.createElement("option"); lop3.value = "AU"; lop3.innerHTML = "AU"; var lop4 = document.createElement("option"); lop4.value = "NZ"; lop4.innerHTML = "NZ"; var lop5 = document.createElement("option"); lop5.value = "PK"; lop5.innerHTML = "PK"; var lop6 = document.createElement("option"); lop6.value = "PH"; lop6.innerHTML = "PH"; var lop7 = document.createElement("option"); lop7.value = "ID"; lop7.innerHTML = "ID"; var lop8 = document.createElement("option"); lop8.value = "VN"; lop8.innerHTML = "VN"; var lop9 = document.createElement("option"); lop9.value = "TH"; lop9.innerHTML = "TH"; var lop10 = document.createElement("option"); lop10.value = "IN"; lop10.innerHTML = "IN"; var lop11 = document.createElement("option"); lop11.value = "CN"; lop11.innerHTML = "CN"; var lop12 = document.createElement("option"); lop12.value = "JP"; lop12.innerHTML = "JP"; var lop13 = document.createElement("option"); lop13.value = "KR"; lop13.innerHTML = "KR"; var lop14 = document.createElement("option"); lop14.value = "TW"; lop14.innerHTML = "TW"; var lop15 = document.createElement("option"); lop15.value = "HK"; lop15.innerHTML = "HK"; var lop16 = document.createElement("option"); lop16.value = "HK-EN"; lop16.innerHTML = "HK-EN"; tdc3a.appendChild(lop1); tdc3a.appendChild(lop2); tdc3a.appendChild(lop3); tdc3a.appendChild(lop4); tdc3a.appendChild(lop5); tdc3a.appendChild(lop6); tdc3a.appendChild(lop7); tdc3a.appendChild(lop8); tdc3a.appendChild(lop9); tdc3a.appendChild(lop10); tdc3a.appendChild(lop11); tdc3a.appendChild(lop12); tdc3a.appendChild(lop13); tdc3a.appendChild(lop14); tdc3a.appendChild(lop15); tdc3a.appendChild(lop16); document.body.appendChild(tdc3); document.body.appendChild(tdc3a); 

下图是将代码注入aspx页面后的屏幕截图：

下图是将代码注入自己创建的HTML虚拟页面后的屏幕截图：

附加信息：之所以用Java语言编写代码，是因为我目前正在为工作用途开发书签书签注入器。
我试图将Javascript代码注入.aspx页面，以在其中弹出一些文本字段，数据列表和下拉列表的div块。 我正在使用的浏览器是IE 11。
我试图将原始代码文件注入到我自己创建的虚拟HTML页面中，并且可以正常工作而没有任何错误，但是在我刚才提到的.aspx页面中却没有。
为了创建一个下拉列表，我们可能需要创建一个select标记和几个option标记作为子标记。 注入后在.aspx页中这可以正常工作。
但不幸的是，datalist标签中的option标签不能像上面所附的屏幕截图那样正常工作。

请您提出意见。 非常感谢。

Answer 1

1. 必须将datalist元素附加到body或文档中存在的任何其他元素，例如

document.body.appendChild(tdc3a);

2. 目前浏览器似乎忽略datalists被后插入到DOM list的属性input设置。 因此，在设置input的list属性之前，将datalist list插入DOM非常重要。 示例： http ： //codepen.io/askl/pen/kXZLbj

3. 数据列表不适用于所有浏览器，例如，截至2016年7月，Safari和Firefox都不支持它。另请参见http://caniuse.com/#search=datalist 。