为什么没有发挥作用

Question

正如标题所说，我想HTML DataList的选项标签是有这部分代码的任何错误：

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);

下面的图片是截图后我注入我的代码into aspx页面：

下面的图片是我将代码注入到HTML虚拟页面后的截图它通过自己创建：

其他资料： 为什么我写我的代码JavaScript中的原因是我目前正在开发一个书签注入我的工作使用。
我正在尝试将Javascript代码注入.aspx页面以弹出一个div块，其中包含一些文本字段，数据列表和下拉列表。我正在使用的浏览器是IE 11.
我试图将原始代码文件注入我自己创建的虚拟HTML页面，并且它完全正常工作，没有任何错误，但不在我刚才提到的.aspx页面中。
为了创建一个下拉列表，我们可能需要创建一个选择标签和几个选项标签作为孩子。这在注入后的.aspx页面中工作正常。
但不幸的是，datalist标记中的选项标记将无法正常工作，如上面的截图所示。

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

Answer 1

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

document.body.appendChild(tdc3a);

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

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