Why HTML datalist's option tag not functioning
<p>As title mentioned, I am thinking is there any error for this part of code:</p>

<p><div class="snippet" data-lang="js" data-hide="false" data-console="false" data-babel="false">
<div class="snippet-code">
<pre class="snippet-code-js lang-js prettyprint-override"><code>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);</code></pre>
</div>
</div>
</p>

<p>The image below is screenshot after I inject my code into aspx page:
<a href="https://i.stack.imgur.com/SUN8O.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/SUN8O.png" alt="Screenshot"></a><br><br></p>

<p>The image below is screenshot after I inject my code into a HTML dummy page which created by myself:
<a href="https://i.stack.imgur.com/N2FVu.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/N2FVu.png" alt="Expected result"></a><br></p>

<p>Additional infomation:
The reason why I writing my code in Javascript is I am currently developing a bookmarklet injector for my job uses. <br>
I am trying to inject Javascript code into .aspx page to popup a div block with some text field, datalist and drop-down list in it. The browswer I working with is IE 11.<br>
I have tried to inject the original code file into a dummy HTML page which I created by myself and it is fully working without any error, but not in the .aspx page I mentioned just now.<br>
In order to create a drop-down list, We might need to create a select tag and several option tag as child. This works fine in the .aspx page after injection.<br>
But unfortunately, the option tag in datalist tag won't working well as in the screenshot attached above.</p>

<p>Please kindly advise your opinions.
Thanks a lot.</p>