我如何将 <Input> <datalist> 放入 JS 文件中，因为 HTML 的权重正在增加？

Question

我必须将特定国家/地区的城市/位置列表的庞大数据集传递给用户，因为它可以重复使用。

我可以像这样简单地将它放在 HTML 代码中：

<datalist id="cities">
<option value="Mumbai">
<option value="New Delhi">
<option value="Moscow">
<option value="New York">
<option value="Washington">
</datalist>

我觉得每次用户重新加载页面时，整个过程都会使 HTML 文件变得非常沉重。

我能否以某种方式将其放入 JS 文件并将其传递给 DOM/HTML 而无需任何附加的笨重代码？

a) 这可以做到吗 b) 这首先是个好主意吗？

Answer 1

所以经过一番摆弄和环顾四周，我自己找到了解决问题的办法。

涉及javascript的使用。对于这段 HTML 代码：

我添加了这个简单的 javascript。

<script>
datalist=document.getElementById("countries");
datalist.empty();
datalist.append("<option value="India"><option value="Vietnam"><option value="Russia"><option value="Greece"><option value="New Zealand">")
</script>

并且有效。

现在我的下一个目标是通过 for next 循环填充此追加。对于大型数据列表，这将使代码更小。

我如何将 <Input> <datalist> 放入 JS 文件中，因为 HTML 的权重正在增加？

How can I put <Input> <datalist> it in the JS file because is increasing weight of HTML?

html

html-datalist