为什么HTML datalist的选项标签不起作用

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虚拟页面后的屏幕截图：

其他信息： 我在Javascript中编写代码的原因是我正在为我的工作用途开发一个bookmarklet注入器。
我试图将Javascript代码注入.aspx页面以弹出一个div块，其中包含一些文本字段，datalist和下拉列表。我使用的浏览器是IE 11.
我试图将原始代码文件注入我自己创建的虚拟HTML页面，它完全正常工作，没有任何错误，但是我刚刚提到的.aspx页面中没有。 为了创建一个下拉列表，我们可能需要创建一个select标签和几个选项标签作为子标签。这在注射后的.aspx页面中工作正常 但不幸的是，datalist标签中的选项标签将无法正常工作，如上面附带的屏幕截图所示。

请告知您的意见。 非常感谢。

Answer 1

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

document.body.appendChild(tdc3a);

1. 目前，在datalists的{​​{1}}属性设置后，浏览器似乎忽略了插入DOM的list。因此，在设置input的{​​{1}}属性之前，向DOM插入datalist非常重要。示例：http://codepen.io/askl/pen/kXZLbj

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