title: Failed to execute 'appendChild' on 'Node': The new child element contains the parent dropdown issue
body: <p>I am creating an autocomplete <code>div</code> dropdown.</p>
  
  <pre><code>a = document.createElement("DIV");
      a.setAttribute("id","autocomplete-list");
      a.setAttribute("class", "autocomplete-items");
      /*append the DIV element as a child of the autocomplete container:*/
  
  
      b = document.createElement("DIV");
      b.classList.add("row", "no-gutters")
      for (i = 0; i &lt; arr.length; i++) {
          /*check if the item starts with the same letters as the text field value:*/
  
            /*create a DIV element for each matching element:*/
            b = document.createElement("DIV");
            /*make the matching letters bold:*/
          //   b.innerHTML = "&lt;strong&gt;" + arr[i].substr(0, val.length) + "&lt;/strong&gt;";
            b.innerHTML += arr[i]
            /*insert a input field that will hold the current array item's value:*/
            b.innerHTML += "&lt;input type='hidden' value='" + arr[i] + "'&gt;";
            /*execute a function when someone clicks on the item value (DIV element):*/
                b.addEventListener("click", function(e) {
                /*insert the value for the autocomplete text field:*/
                inp.value = this.getElementsByTagName("input")[0].value;
                /*close the list of autocompleted values,
                (or any other open lists of autocompleted values:*/
                closeAllLists();
            });
            a.appendChild(b);
  
        }
      $(b).on('click', '#dropWrapper', function () {
          console.log('on click fired')
          /*insert the value for the autocomplete text field:*/
  
  
          var inputs2 = this.querySelectorAll(".col-4"); // returns all element
  
          inputs2.forEach(ele =&gt; {
              // check for the particular class
              if (ele.getAttribute("class") == "col-4 querySelect") {
                  console.log('here')
  
                  console.log(ele.textContent)
                  inp.value = ele.textContent
                  retrieveOrderDetails(inp.value)
              }
          })
  
          /*close the list of autocompleted values,
          (or any other open lists of autocompleted values:*/
  
      })
          a.appendChild(b);
          inp.parentNode.appendChild(a);
          document.getElementById("autocomplete-list").appendChild(a);
  </code></pre>
  
  <p>The drop down appears but I get the following error:</p>
  
  <blockquote>
    <p>Failed to execute 'appendChild' on 'Node': The new child element contains the parent.</p>
  </blockquote>
  
  <p>On this line</p>
  
  <pre><code>document.getElementById("autocomplete-list").appendChild(a);
  </code></pre>
  
  <p>I cannot figure out what the error means.</p>