Appending a Child element to a parent node using AppendChild()

Button to call JS Method:

<button class="btn btn-cta btn-next add-cost-item-btn" onclick="addNewItem()" type="button">
    <span class="name">Add New Item</span>
</button>

Js Method:

function addNewItem() {
  let divOne = document.querySelector('.js-div-item');
  let grid = document.querySelector('.js-cost-input-grid');
  grid.appendChild(divOne);
}

HTML

<div class="row cost-input js-cost-input-grid">
  <div class="input-label cost-input-child">Item</div>
  <div class="input-label item-cost cost-input-child js-div-item">
     @Html.TextBoxFor(m => m.Item, new { @class = "form-control currency-input", placeholder = "Item name" })
</div>
               

When trying to append a child onto js-cost-input-grid nothing is happening?

I tried appending a the result of document.createElement('p') – which worked fine. Why does it not work with my divOne?