Append child not working with newly created element

Question

I want to append child to a div.

<div class="d-flex quantityReceived" id="quantityReceived">
               <button type="button" class="btn btn-info changeValue" onclick="allOrderType()"><div id="spinner"><i class="fas fa-caret-down"></i></div></button>
                <input name="order" class="typeahead orderType form-control" type="text" id="allOrderType" aria-describedby="Incomplete Orders" placeholder="Incomplete Orders">
            </div>

Here is my javascript to append to the id quantityReceived

console.log(a)
document.getElementById("quantityReceived").appendChild(a);

The element a is a combination of elements like this which I can see in the google console.

<div id="autocomplete-list" class="auocomplete-items>
  <div>
    "Main"
    <input type="hidden" value="main">
  </div>
  <div>
    "Sub"
    <input type="hidden" value="Sub">
  </div>
</div>

However, when I inspect the parent div with id quantityReceived , I do not see the child element a being appended. I am not sure why this is happening

Answer 1

The html that you're attempting to append is incorrect.

You need to close the input, so it should look like this:

<div id="autocomplete-list" class="auocomplete-items>
  <div>
    "Main"
    <input type="hidden" value="main"/>
  </div>
  <div>
    "Sub"
    <input type="hidden" value="Sub"/>
  </div>
</div>

You can then check the result

console.log(document.getElementById("quantityReceived")); 

Answer 2

At first glance, and just taking a guess since your example is lacking in detail, but I would guess that a isn't actually a thing to append correctly. So as a proof of concept to maybe trigger a light bulb to you on your issue;

 const child = document.createElement('aside'); document.getElementById('test1').appendChild(child); 

 div { height: 5rem; width: 10rem; border: red 1px dashed; padding: .5rem; margin: 1rem auto; } div aside { height: 1rem; width: 3rem; border: green 3px dotted; padding: .5rem; margin: 0 auto; } 

 <div id="test1"></div> 

Answer 3

Besides that your HTML-to-be-appended is invalid, I think it should not be a problem (if indeed that HTML is a DOM node and not a string!), see:

 let a = document.createElement('div'); a.setAttribute('class', 'autocomplete-items'); a.setAttribute('id', 'autocomplete-list'); a.innerHTML = ` <div> Main <input type="hidden" value="main" /> </div> <div> Sub <input type="hidden" value="sub" /> </div> `; document.getElementById("quantityReceived").appendChild(a); 

 <div class="d-flex quantityReceived" id="quantityReceived"> <button type="button" class="btn btn-info changeValue" onclick="allOrderType()"> <div id="spinner"> <i class="fas fa-caret-down"></i> </div> </button> <input name="order" class="typeahead orderType form-control" type="text" id="allOrderType" aria-describedby="Incomplete Orders" placeholder="Incomplete Orders" /> </div>