爲什麼沒有發揮作用

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。