函数 getelementbyid 没有输出到正确的位置

Question

我正在制作表格以将玩家添加到活动中。该表单使用用户指定的搜索条件搜索玩家数据库，然后列出所有匹配的玩家，旁边有一个添加按钮。我还有一个 table 完成所有 table headers 然后

<div id="PlayerAdded">

结束前的标记 table。

我编写了一个函数，当玩家 "Add" 按钮被点击时，将下一行的数据输出到 table。我的功能说：

function add(){
    document.getElementById("PlayerAdded").innerHTML += "<tr><td>success</td></tr>";
}

我希望这会添加一行，但它只在 table 上方添加了 "success" 这个词（也许我在使用成功这个词作为测试字符串时有点乐观 lol ). 有人可以告诉我为什么它没有在 div "PlayerAdded" 中添加代码吗？

如果有帮助，这里是一些 HTML:

<table border='1px'>
<tr><th colspan='6'> <?php echo ($eName . " - " . $vn); ?></th></tr>
<tr><th>Player ID</th>
<th>Player Name</th>
<th>Place</th>
<th>Points</th>
<th>Cash</th>
<th>Ticket?</th></tr>

<div id="PlayerAdded"> </div>

<tr><td colspan='3'>Search <input type='text' id='newsearch'></input>
</table>

Answer 1

尝试按照用户@Barmar 所说的去做：

<script type="text/javascript">
function add(){
    var _tr = document.createElement("tr");
    var _textNode = document.createTextNode("Success");
    _tr.appendChild(_textNode);
    var _child = document.getElementById("botTr");
    var parentDiv = _child.parentNode;

    parentDiv.insertBefore(_tr, botTr);
}
</script>

然后：

<table border='1px'>
<tr><th colspan='6'> <?php echo ($eName . " - " . $vn); ?> </th></tr>
<tr id="topTr"><th>Player ID</th>
<th>Player Name</th>
<th>Place</th>
<th>Points</th>
<th>Cash</th>
<th>Ticket?</th>
</tr>

<tr id="botTr"><td colspan='3'>Search <input type='text' id='newsearch' />
</table>
<input type="button" name="hitme" id="hitme" value="hitme" onclick="add();" />

Answer 2

您现有的 HTML 存在一些问题 - 因此在浏览器尝试 assemble 时破坏了您的 DOM。

a <div> 元素 – 在 <table> 中 – 必须包含在 <th> 或 <td> 元素中；没有其他元素是 <tr> 元素的有效子元素，<table> 元素的唯一有效子元素是 <thead>、<tfoot>、<tbody> 和 <tr> 元素。
您的最后一个 <tr> 或其子 <td> 元素都未关闭 – 浏览器在遇到另一个 <td> 时会自动关闭这些元素（因为 <td>，也不是 <tr>，可以直接嵌套在另一个 <td>)。

也就是说，我会将您的 HTML 更正为以下内容：

<table>
    <tbody>
        <tr>
            <th colspan='6'>&laquo; php response &raquo;</th>
        </tr>
        <tr>
            <th>Player ID</th>
            <th>Player Name</th>
            <th>Place</th>
            <th>Points</th>
            <th>Cash</th>
            <th>Ticket?</th>
        </tr>
        <tr>
            <td colspan='3'>Search
                <input type='text' id='newsearch' />
            </td>
            <td></td>
            <td></td>
            <td></td>
        </tr>
    </tbody>
</table>
<button id="addNewRow">Add a new row</button>

你的 JavaScript 如下：

function addNewRow() {

  // creating the relevant elements to be added:
  var row = document.createElement('tr'),
    td = document.createElement('td');

  // setting the text of the created-<td> element:
  td.textContent = 'Success';

  // setting the colSpan property (the colspan attribute):
  td.colSpan = '6';

  // adding a class-name to the created-<td>, to make it
  // visually obvious which are the newly-added <td>
  // elements:
  td.classList.add('addedRow');

  // appending the created-<td> to the created-<tr>:
  row.appendChild(td);

  // finding the last <tr> of the table, using
  // document.querySelector() which will match
  // only the first element that matches the
  // supplied CSS selector (or null, if no
  // element exists that matches):
  var lastRow = document.querySelector('table tr:last-child');

  // inserting the created-<tr> (and its descendant
  // elements parentNode of the lastRow node before
  // the lastRow node):
  lastRow.parentNode.insertBefore(row, lastRow);
}

// using unobtrusive JavaScript to add the 'click'
// event-listener to the <button> element with the
// id of 'addNewRow':
document.getElementById('addNewRow').addEventListener('click', addNewRow);

function addNewRow() {
    var row = document.createElement('tr'),
        td = document.createElement('td');
    
    td.textContent = 'Success';
    td.colSpan = '6';
    td.classList.add('addedRow');
    
    row.appendChild(td);
    
    var lastRow = document.querySelector('table tr:last-child');
    
    lastRow.parentNode.insertBefore(row, lastRow);
}

document.getElementById('addNewRow').addEventListener('click', addNewRow);

table,
td,
th {
  border: 1px solid #000;
  min-height: 2em;
}
td.addedRow {
  font-weight: bold;
  text-align: center;
  border-color: limegreen;
}

<table>
  <tbody>
    <tr>
      <th colspan='6'>&laquo; php response &raquo;</th>
    </tr>
    <tr>
      <th>Player ID</th>
      <th>Player Name</th>
      <th>Place</th>
      <th>Points</th>
      <th>Cash</th>
      <th>Ticket?</th>
    </tr>
    <tr>
      <td colspan='3'>Search
        <input type='text' id='newsearch' />
      </td>
      <td></td>
      <td></td>
      <td></td>
    </tr>
  </tbody>
</table>
<button id="addNewRow">Add a new row</button>

外部 JS Fiddle demo，用于实验或开发。

参考文献：

函数 getelementbyid 没有输出到正确的位置

function getelementbyid not outputting to correct place

javascript

layout

function

onclick

getelementbyid