title: How to dynamically create HTML input containing datalist using jQuery?
body: <p>I have a HTML <code>datalist</code> that looks like this</p>
  
  <pre><code>&lt;input type="text" list="cars" /&gt; 
  &lt;datalist id="cars"&gt;
      &lt;option&gt;Volvo&lt;/option&gt;
      &lt;option&gt;Saab&lt;/option&gt;
      &lt;option&gt;Mercedes&lt;/option&gt;
      &lt;option&gt;Audi&lt;/option&gt;
  &lt;/datalist&gt;
  </code></pre>
  
  <p>Now I have a <code>cars list</code></p>
  
  <pre><code>var carsList = ['Volvo', 'Saab', 'Mercedes', 'Audi']
  </code></pre>
  
  <p>Now I want to create the <code>input field</code> and <code>datalist</code> and fill it dynamically using <code>jquery</code>. So basically I want to create the above html snippet dynamically using <code>jquery</code>.</p>
  
  <p>So this is what I do</p>
  
  <pre><code> 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($("&lt;option&gt;").attr('value', i).text(item));
   }); 
  </code></pre>
  
  <p>But it only creates the <code>input</code> element and not the <code>datalist</code> element with it. What am I doing wrong?</p>
  
  <p><strong>EDIT:</strong> I want to create an independent html since I only want to use it on <code>sweetalert2</code> popup and take input from the user.</p>
  
  <p>This is what I show to the user. The popup only shows the <code>input</code> fieled but not the <code>dropdown</code>.</p>
  
  <pre><code>swal({
        title: 'Select a car name or define one',
        html: carInput,
        showCancelButton: true,
        width: '500px', 
        });
  </code></pre>