追加不使用新創建元素的孩子

Question

我想將孩子追加到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>

這是我的JavaScript附加到ID quantityReceived

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

元素a是這樣的元素的組合，我可以在Google控制台中看到它。

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

但是，當我檢查ID為quantityReceived的父div時，沒有看到子元素被追加。 我不確定為什么會這樣

Answer 1

您嘗試附加的html不正確。

您需要關閉輸入，因此它應如下所示：

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

然后您可以檢查結果

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

Answer 2

乍一看，由於您的示例缺少詳細信息，因此僅作猜測，但是我猜想a並不是正確附加的東西。 因此，作為一種概念證明，也許可以在您遇到的問題時向您觸發一個燈泡；

 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

除了您要添加的HTML無效之外，我認為應該沒有問題（如果確實HTML是DOM節點而不是字符串！），請參見：

 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>