Скрипт не получает innerHTML?

Question

У меня есть этот HTML здесь

<div id="team_players">
  <h3>Players</h3>
  <button class="bold-btn" onclick="teamAct('player_list');">Refresh List ↻</button>
  <table>
    <thead>
      <tr>
        <th>Name(s)</th>
        <th>Inventory</th>
        <th>Playtime</th>
        <th>Notes</th>
        <th>Actions</th>
      </tr>
    </thead>
    <tbody>
      <tr data-player-ref="1">
        <td>Scriptist.<br>Scriptist.<br>HollowPresenter<br></td>
        <td><img src="img/item/item_shredder_g.png"><img src="img/item/block.png"></td>
        <td>4:13:20</td>
        <td><u style="color: #0F0">Online</u><u style="color: #0FF">Captain [1]</u><br><u style="color: #F00">Possible Alias of Snogg &lt;0&gt; [BANNED]</u></td>
        <td><br></td></tr><tr data-player-ref="13">
        <td>Snogg<br></td>
        <td></td>
        <td>9:01</td>
        <td><u style="color: #F00">Banned</u><br><u style="color: #FFF">Possible Alias of HollowPresenter &lt;0&gt;</u></td>
        <td><button class="btn-small btn-orange" onclick="teamAct('unban',13);">Un-Ban</button></td>
      </tr>
    </tbody>
  </table>
</div>

Я пытаюсь получить innerHTML второго <td> элемента. Вот мой сценарий ниже:

var Userinventory = document.querySelectorAll('tr[data-player-ref] > td:nth-of-type(2)' );

Userinventory.forEach(getinventoryitems)

function getinventoryitems(item, index) {
  var useritems = item.innerHTML[0];
  console.log(useritems);
}

Почему это не получит innerHTML? Который должен возвращать что-то вроде этого

<td><img src="img/item/item_shredder_g.png"><img src="img/item/block.png"></td>

Answer 1

У вас есть [0] на .innerHTML, который получает только первый символ.

var Userinventory = document.querySelectorAll('tr[data-player-ref] > td:nth-of-type(2)'); 
Userinventory.forEach(getinventoryitems)

function getinventoryitems(item, index) {
  var useritems = item.innerHTML;
  console.log(useritems);
}

<div id="team_players">
  <h3>Players</h3>
  <button class="bold-btn" onclick="teamAct('player_list');">Refresh List ↻</button>
  <table>
    <thead>
      <tr>
        <th>Name(s)</th>
        <th>Inventory</th>
        <th>Playtime</th>
        <th>Notes</th>
        <th>Actions</th>
      </tr>
    </thead>
    <tbody>
      <tr data-player-ref="1">
        <td>Scriptist.<br>Scriptist.<br>HollowPresenter<br></td>
        <td><img src="img/item/item_shredder_g.png"><img src="img/item/block.png"></td>
        <td>4:13:20</td>
        <td><u style="color: #0F0">Online</u><u style="color: #0FF">Captain [1]</u><br><u style="color: #F00">Possible Alias of Snogg &lt;0&gt; [BANNED]</u></td>
        <td><br></td></tr><tr data-player-ref="13">
        <td>Snogg<br></td>
        <td></td>
        <td>9:01</td>
        <td><u style="color: #F00">Banned</u><br><u style="color: #FFF">Possible Alias of HollowPresenter &lt;0&gt;</u></td>
        <td><button class="btn-small btn-orange" onclick="teamAct('unban',13);">Un-Ban</button></td>
      </tr>
    </tbody>
  </table>
</div>

Answer 2

Существует более простой способ сделать это,
с соответствующими методами javascript для доступа к html-таблицам:

document.querySelector('table tbody').rows[0].cells[1].innerHTML

https://developer.mozilla.org/en-US/docs/Web/API/HTMLTableElement/rows

console.log( document.querySelector('table tbody').rows[0].cells[1].innerHTML )

.as-console {background-color:black !important; color:lime;}
.as-console-wrapper {min-height:100% !important; top:0;}

<div id="team_players">
  <h3>Players</h3>
  <button class="bold-btn" onclick="teamAct('player_list');">Refresh List ↻</button>
  <table>
    <thead>
      <tr>
        <th>Name(s)</th>
        <th>Inventory</th>
        <th>Playtime</th>
        <th>Notes</th>
        <th>Actions</th>
      </tr>
    </thead>
    <tbody>
      <tr data-player-ref="1">
        <td>Scriptist.<br>Scriptist.<br>HollowPresenter<br></td>
        <td><img src="img/item/item_shredder_g.png"><img src="img/item/block.png"></td>
        <td>4:13:20</td>
        <td><u style="color: #0F0">Online</u><u style="color: #0FF">Captain [1]</u><br><u style="color: #F00">Possible Alias of Snogg &lt;0&gt; [BANNED]</u></td>
        <td><br></td></tr><tr data-player-ref="13">
        <td>Snogg<br></td>
        <td></td>
        <td>9:01</td>
        <td><u style="color: #F00">Banned</u><br><u style="color: #FFF">Possible Alias of HollowPresenter &lt;0&gt;</u></td>
        <td><button class="btn-small btn-orange" onclick="teamAct('unban',13);">Un-Ban</button></td>
      </tr>
    </tbody>
  </table>
</div>