我的innerHTML显示在它应该写入的div之前

Question

我正在为网页上的购物车编写一些非常基本的代码（这是一个任务，并且我仅限于JS，HTML和CSS）

我试图填写一个表，填充任何包含在一系列数组（Name []，Quantity []和Sum []）中。我已经有了一张桌子，我正在写入的div在一张桌子里。然而，每当我运行网页时，表格及其内容总是写在我作为一个单独的表格之前。

我不是什么出了错完全确定，所以这里的代码： HTML：

<table border="1"> 
     <thead> 
     <tr> 
      <th>Product</th> 
      <th>Quantity</th> 
      <th>Sum Total</th> 
     </tr> 
     </thead> 
     <div id="cart"></div> 
     </table> 

的JavaScript：

function ViewShoppingCart(){ 
     document.getElementById("cart").innerHTML = ""; // Empties the cart 

     for (var i=0; i<Name.length; i++) { 
      var tr= document.createElement("tr"); 
      document.getElementById("cart").appendChild(tr); 
      var td= document.createElement("td"); 
      td.appendChild(document.createTextNode(Name[i])); 
      tr.appendChild(td); 
      var td1= document.createElement("td"); 
      td1.appendChild(document.createTextNode(Quantity[i])); 
      tr.appendChild(td1); 
      var td2= document.createElement("td"); 
        td2.appendChild(document.createTextNode("\u00A3"+parseFloat(Sum[i]).toFixed(2))); 
      tr.appendChild(td2); 
      } 
    } 

Answer 1

<div> is not a valid child of <table>.浏览器正在重新排列代表您的标记的DOM以试图理解它。

如果你想要一个表中的div，那div将必须在<th>或<td>。

Answer 2

您的HTML是错误的。您不能将<div>放在<table>标签内。它需要在<td>之内。