获取span子元素innerHTML并插入指定ID元素：代码失效原因及解决

• 缺少document前缀：getElementById是document对象的专属方法，直接调用会触发未定义错误，浏览器无法识别这个全局函数。
• HTML结构不合法：
  • <tbody>不能单独存在，必须嵌套在<table>标签内部，否则浏览器会自动修正DOM结构，导致#spanID元素的位置不符合预期。
  • 所有页面内容（<script>、<tbody>、<br>、<p>等）都应该放在<body>标签内部，原代码中<body>标签在最后，导致DOM解析异常。

1. 修正JavaScript代码 #

给getElementById添加document前缀，确保方法能被正确调用：

function countTest() {
  let spanContent = document.getElementById("spanID").getElementsByTagName('span')[0].innerHTML;
  document.getElementById("placeSpanVAR").innerHTML = spanContent;
}

2. 修正HTML结构 #

将<tbody>放入<table>中，同时把所有内容移到<body>内部：

<!DOCTYPE html>
<html>
<head>
  <script src="countTest.js"></script>
</head>
<body onload="countTest()">
  <table>
    <tbody id="spanID">
      <tr>
        <td colspan="100" nowrap="nowrap" class="ms-gb">
          <a href="javascript:" onclick=""></a>
          <span>(2)</span>
        </td>
      </tr>
    </tbody>
  </table>
  <br>
  <p id="placeSpanVAR"></p>
</body>
</html>

3. 更简洁的优化方案（可选） #

使用querySelector直接定位目标<span>，代码更简洁；同时用textContent替代innerHTML（仅获取文本内容更安全，避免HTML解析风险）：

function countTest() {
  let spanText = document.querySelector('#spanID span').textContent;
  document.getElementById("placeSpanVAR").textContent = spanText;
}

内容的提问来源于stack exchange，提问作者bryan0920