如果输入字段是在按下按钮时创建的，是否可以将数据列表添加到输入字段？答案

【问题标题】：Is it possible to add a datalist to an input field if the input field was created on a button press?如果输入字段是在按下按钮时创建的，是否可以将数据列表添加到输入字段？
【发布时间】：2020-01-08 23:46:17
【问题描述】：

我对 HTML/CSS/Javascript 和 stackoverflow 非常陌生。我正在尝试自学一些用户输入。目前，我一直在尝试使用数据列表。

在我的 head 标签下，我成功地创建了一个使用 HTML 的 datalist boxlist 的输入。耶！

但是，我不知道如何使在按钮按下时创建的输入（即在 javascript addFields 函数中创建）也使用 boxlist 数据列表。

如何获取新创建的输入字段以使用 boxlist 数据列表？是否可以在 javascript 中声明数据列表，并且仍然让新字段使用它？

        function addFields() {
            var input = document.createElement("input");
            document.body.appendChild(input);
        }

<head>
    <input name="box" list="boxlist" />
    <datalist id="boxlist">
        <option value="Item1"></option>
        <option value="Item2"></option>
        <option value="Item3"></option>
        <option value="Item4"></option>
    </datalist>
    <button type="button" onclick="addFields()">Add input</button>
</head>

【问题讨论】：

不要在<head>中放置任何html元素@正文是放置这些东西的地方！并且脚本标签应该在head。你真的应该从初学者指南开始，我们不能在这里教你基础知识。
这能回答你的问题吗？ Creating a HTML5 datalist on the fly
您想要实现的是，在按下按钮时创建具有相同options 的新datalist 标签（换句话说，复制它）
感谢@elsololobo 的建议。现在正在查看一些指南。
@deblocker 谢谢你的链接！虽然它确实包含答案，但阿纳金让它更容易理解。谢谢大家！

标签： javascript html

【解决方案1】：

您的代码几乎可以正常工作，您只需将list 属性添加到您创建的输入中。

var element = document.createElement("input");
element.setAttribute("list", "boxlist");

注意：
最好将 input 和 datalist 包装在容器中，然后将输入附加到容器中。这样以后管理起来会更方便。

工作小提琴：https://jsfiddle.net/Black3800/7kpqLg4z/

【讨论】：