Javascript innerHTML不工作并放置在错误位置

我把这张桌子放在里面

<table>
<tr>...</tr>
<div class="injector" id="inject1"></div>
<tr>...</tr>
</table>

...
...

使用javascript，我尝试在“inject1”中注入一些其他html。我的JS是：

document.getElementById("inject1").innerHTML+="<tr><td><h3 class='description'>Runway visual range:</h3></td></tr><tr><td><h4 class='description'>Runway number:</h4></td><td><input type='text' class='dataField' id='runwayNumber' disabled></input></td></tr><tr><td><h4 class='description'>Runway visibility:</h4></td><td><input type='text' class='dataField' id='runwayVisibility' disabled></input></td></tr>";

document.getElementById（“inject1”）.innerHTML+=“跑道可视范围：跑道编号：跑道可见性：”；

---

但是出于某种原因，它没有将新表行放在表的中间（div所在的位置），而是将新行放在表的顶部，并且没有正确对齐。如果我手动粘贴相同的精确代码（引号内的代码），效果很好。

DIV不是表的有效子级，因此浏览器以不同方式呈现代码以使其有效。您应该使用tbody元素

<table>
  <thead>
    <tr><td></td></tr>
  </thead>
  <tbody class="injector" id="inject1"></tbody>
  <tfoot>
    <tr><td></td></tr>
  </tfoot>
</table>

如果不在您所说的父HTML表的上下文中查看“div在哪里”，则无法回答此问题。

TR

直接在

div

中是无效的HTML标记。