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

Question

我正在制作一个表格来将玩家添加到事件中。 该表单使用用户指定的搜索条件搜索玩家数据库，然后列出所有匹配的玩家，旁边有一个添加按钮。 我还有一个表格，其中包含所有表格标题，然后是一个

<div id="PlayerAdded"> 

表格结束前的标签。

我编写了一个函数，当玩家点击“添加”按钮时，将下一行的数据输出到表格中。我的功能说:

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

我希望这会添加一行，但它只是在表格上方添加了“success”这个词(当我使用 success 这个词作为我的测试字符串时，也许我有点乐观哈哈)。 有人能告诉我为什么它没有在 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

您现有的 HTML 存在一些问题 - 因此当浏览器尝试组合内容时会破坏您的 DOM。

1. 一个<div>元素 – 在 <table> 中– 必须包含在 <th> 中或 <td>元素;没有其他元素是 <tr> 的有效子元素元素，以及 <table> 的唯一有效子元素元素是<thead> , <tfoot> , <tbody>和 <tr>元素。
2. 不是你的最后一个 <tr> , 或者它的 child <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 , 用于实验或开发。

引用资料:

• > document.createElement() .
• > document.getElementById() .
• > document.querySelector() .
• > Element.classList .
• > EventTarget.addEventListener() .
• > Node.appendChild() .
• > Node.insertBefore() .