I am creating an autoplete div dropdown.

a = document.createElement("DIV");
    a.setAttribute("id","autoplete-list");
    a.setAttribute("class", "autoplete-items");
    /*append the DIV element as a child of the autoplete container:*/


    b = document.createElement("DIV");
    b.classList.add("row", "no-gutters")
    for (i = 0; i < 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 = "<strong>" + arr[i].substr(0, val.length) + "</strong>";
          b.innerHTML += arr[i]
          /*insert a input field that will hold the current array item's value:*/
          b.innerHTML += "<input type='hidden' value='" + arr[i] + "'>";
          /*execute a function when someone clicks on the item value (DIV element):*/
              b.addEventListener("click", function(e) {
              /*insert the value for the autoplete text field:*/
              inp.value = this.getElementsByTagName("input")[0].value;
              /*close the list of autopleted values,
              (or any other open lists of autopleted values:*/
              closeAllLists();
          });
          a.appendChild(b);

      }
    $(b).on('click', '#dropWrapper', function () {
        console.log('on click fired')
        /*insert the value for the autoplete text field:*/


        var inputs2 = this.querySelectorAll(".col-4"); // returns all element

        inputs2.forEach(ele => {
            // 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 autopleted values,
        (or any other open lists of autopleted values:*/

    })
        a.appendChild(b);
        inp.parentNode.appendChild(a);
        document.getElementById("autoplete-list").appendChild(a);

The drop down appears but I get the following error:

Failed to execute 'appendChild' on 'Node': The new child element contains the parent.

On this line

document.getElementById("autoplete-list").appendChild(a);

I cannot figure out what the error means.

I am creating an autoplete div dropdown.

a = document.createElement("DIV");
    a.setAttribute("id","autoplete-list");
    a.setAttribute("class", "autoplete-items");
    /*append the DIV element as a child of the autoplete container:*/


    b = document.createElement("DIV");
    b.classList.add("row", "no-gutters")
    for (i = 0; i < 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 = "<strong>" + arr[i].substr(0, val.length) + "</strong>";
          b.innerHTML += arr[i]
          /*insert a input field that will hold the current array item's value:*/
          b.innerHTML += "<input type='hidden' value='" + arr[i] + "'>";
          /*execute a function when someone clicks on the item value (DIV element):*/
              b.addEventListener("click", function(e) {
              /*insert the value for the autoplete text field:*/
              inp.value = this.getElementsByTagName("input")[0].value;
              /*close the list of autopleted values,
              (or any other open lists of autopleted values:*/
              closeAllLists();
          });
          a.appendChild(b);

      }
    $(b).on('click', '#dropWrapper', function () {
        console.log('on click fired')
        /*insert the value for the autoplete text field:*/


        var inputs2 = this.querySelectorAll(".col-4"); // returns all element

        inputs2.forEach(ele => {
            // 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 autopleted values,
        (or any other open lists of autopleted values:*/

    })
        a.appendChild(b);
        inp.parentNode.appendChild(a);
        document.getElementById("autoplete-list").appendChild(a);

The drop down appears but I get the following error:

Failed to execute 'appendChild' on 'Node': The new child element contains the parent.

On this line

document.getElementById("autoplete-list").appendChild(a);

I cannot figure out what the error means.

• javascript
• html
• dom

• if you're already using jQuery (which is what ` $(b).on('click', '#dropWrapper', function () {` implies), why would you go trough the hassle of creating the dropdown with lengthy native methods? Furthermore, a sample of your input data (that you're looping to create the dropdown options) would be helpful! – exside Commented Jul 5, 2019 at 17:05

1 Answer 1

I see that you define a's id as autoplete-list at the top of the code. Then at the bottom you attempt to append a to the element with id autoplete-list. There's some kind of recursion going on in your attempt to append the element to itself as a child.