如何使用jQuery动态创建包含数据列表的HTML输入？

Question

我有一个看起来像这样的HTML datalist

<input type="text" list="cars" /> 
<datalist id="cars">
    <option>Volvo</option>
    <option>Saab</option>
    <option>Mercedes</option>
    <option>Audi</option>
</datalist>

现在我有一个cars list

var carsList = ['Volvo', 'Saab', 'Mercedes', 'Audi']

现在我要创建input field和datalist，并使用jquery动态填充它。因此，基本上我想使用jquery动态创建上述html代码段。

所以这就是我要做的

 var carInput = document.createElement("input");
 carInput.type="text";
 carInput.list="cars";
 carInput.id = "carName"
 var carDatalist = document.createElement("datalist");
 carDatalist.id="cars";

 $.each(carsList, function(i, item) {
        $("#cars").append($("<option>").attr('value', i).text(item));
 }); 

但是它仅创建input元素，而不创建datalist元素。我在做什么错？

EDIT：我想创建一个独立的html，因为我只想在sweetalert2弹出窗口中使用它并接受用户的输入。

这是我向用户显示的内容。弹出窗口仅显示input字段，但不显示dropdown。

swal({
      title: 'Select a car name or define one',
      html: carInput,
      showCancelButton: true,
      width: '500px', 
      });

Answer 1

var carsList = ['Volvo', 'Saab', 'Mercedes', 'Audi'];

$(".tmp").find("#cars").html("");
$.each(carsList, function(i, item) {
    $(".tmp").find("#cars").append($("<option>").attr('value', i).text(item));
});

var div = $(".tmp").clone().show();

Swal.fire({
  title: 'Select a car name or define one',
  html: div,
  showCancelButton: true,
  width: '500px', 
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/sweetalert2.min.css">
<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/[email protected]/dist/sweetalert2.all.min.js"></script>
<div class="tmp" style="display: none;">
    <input type="text" list="cars" /> 
    <datalist id="cars">
    </datalist>
</div>