如何正确将HTMLCollection的length属性渲染到DOM元素的innerHTML中

你遇到的报错和g.length本身无关，是DOM元素ID大小写不匹配导致的：

• updateStats函数中调用的是document.getElementById('getAL')，末尾的L为大写
• 你写的HTML对应span节点的ID是getAl，末尾的L为小写
  DOM元素ID是大小写敏感的，所以上述查询返回null，给null设置innerHTML属性就会抛出TypeError。

1. 将HTML中对应行的ID改为全大写，和JS选择器保持一致：

<!-- 原代码 -->
<p>Length:<span id="getAl"></span></p>
<!-- 修改后 -->
<p>Length:<span id="getAL"></span></p>

2. 可选优化：给全局变量q、g、newDiv添加let/const声明，避免污染全局作用域。

<!DOCTYPE html>
<html lang="en">
<head>
<script>
function newElement() {
    const newDiv = document.createElement('div')
    newDiv.innerHTML = 'Div 2'
    document.getElementById('wrapper').appendChild(newDiv);
}

function updateStats() {
    document.getElementById('queryA').innerHTML = q;
    document.getElementById('getA').innerHTML = g;
    document.getElementById('queryAL').innerHTML = q.length;
    document.getElementById('getAL').innerHTML = g.length;
}
</script>
</head>
<body>
<button onClick="newElement();">Add Element</button>
<button onClick="updateStats();">Update Stats</button>
<header id="wrapper">
    <div>Div 1</div>
</header>
<h3>querySelector Before</h3>
<p>Type:<span id="queryB"></span></p>
<p>Length:<span id="queryBL"></span></p>
<h3>After</h3>
<p>Type:<span id="queryA"></span></p>
<p>Length:<span id="queryAL"></span></p>
<hr>
<h3>getElementByTagName Before</h3>
<p>Type:<span id="getB"></span></p>
<p>Length:<span id="getBL"></span></p>
<h3>After</h3>
<p>Type:<span id="getA"></span></p>
<p>Length:<span id="getAL"></span></p>
<script>
const q = document.querySelectorAll('div')
const g = document.getElementsByTagName('div')
document.getElementById('queryB').innerHTML = q;
document.getElementById('queryBL').innerHTML = q.length;
document.getElementById('getB').innerHTML = g;
document.getElementById('getBL').innerHTML = g.length;
</script>
</body>
</html>

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