如何向div容器添加文本？JS设置innerHTML/innerText失效排查

尝试用document.querySelector('[data-current-operand]').innerHTML = "test123"、document.querySelector('[data-previous-operand]').innerHTML = "test123"以及.innerText方法给指定div加文本，全都没效果，只能直接在HTML的div标签里写文本才能显示，这是哪里错了？

我的代码如下：

CSS代码 #

.body {
  display: flex;
  flex: 1;
}

.calc-interface {
  display: flex;
  flex-direction: column;
}

output {
  display: flex;
  flex-direction: column;
}

.previous-operand {
  display: flex;
  flex: 1;
  width: 220px;
  height: 150px;
  border: 2px solid grey;
  justify-content: flex-end;
  align-items: center;
}

.current-operand {
  display: flex;
  background-color: antiquewhite;
  flex: 1;
  width: 220px;
  height: 150px;
  border: 2px solid grey;
  justify-content: flex-end;
  align-items: center;
}

.size-box {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100px;
  margin-left: 70px;
}

.numbers {
  display: inline-block;
  gap: 4px;
  width: 220px;
  margin-top: 5px;
}

#digits {
  padding: 15px;
  width: 40px;
  margin: 1px;
}

.operator {
  padding: 15px;
  width: 40px;
  margin: 1px;
}

HTML代码 #

<head>
  <script>
    document.querySelector('[data-previous-operand]').innerHTML = "test";
    document.querySelector('[data-current-operand]').innerHTML = "test";
  </script>
</head>

<body>
  <div class="calc-interface">
    <div class="output">
      <div data-previous-operand class="previous-operand" id="previous-operand"> </div>
      <div data-current-operand class="current-operand" id="current-operand"> </div>
    </div>

    <div class="numbers">
      <button data-number id="digits"> 1 </button>
      <button data-number id="digits"> 2 </button>
      <button data-number id="digits"> 3 </button>
      <button data-operation id="+" class="operator"> + </button>
      <button data-number id="digits"> 4 </button>
      <button data-number id="digits"> 5 </button>
      <button data-number id="digits"> 6 </button>
      <button data-operation id="-" class="operator"> - </button>
      <button data-number id="digits"> 7 </button>
      <button data-number id="digits"> 8 </button>
      <button data-number id="digits"> 9 </button>
      <button data-operation id="*" class="operator"> * </button>
      <button data-all-clear id="clear" class="operator"> C </button>
      <button data-number id="digits" class="zero"> 0 </button>
      <button data-equal id="equal" class="operator"> = </button>
      <button data-operation id="/" class="operator"> / </button>
    </div>

  </div>
</body>

核心问题：脚本执行时机过早 #

你的<script>标签放在<head>里，浏览器解析HTML是从上到下的，当执行这段JS时，<body>里的data-previous-operand和data-current-operand元素还没被加载出来，document.querySelector找不到对应的DOM节点，自然没法设置内容。

两种解决办法 #

1. 把脚本移到<body>末尾
   把<script>标签放到</body>结束标签的前面，确保浏览器先加载完所有DOM元素再执行JS：

   <body>
     <!-- 所有HTML内容 -->
     <script>
       document.querySelector('[data-previous-operand]').innerHTML = "test";
       document.querySelector('[data-current-operand]').innerHTML = "test";
     </script>
   </body>
   

2. 监听DOM加载完成事件
   如果必须把脚本留在<head>里，就用DOMContentLoaded事件，等整个DOM树构建完成后再执行代码：

   <head>
     <script>
       document.addEventListener('DOMContentLoaded', function() {
         document.querySelector('[data-previous-operand]').innerHTML = "test";
         document.querySelector('[data-current-operand]').innerHTML = "test";
       });
     </script>
   </head>
   

额外提醒 #

你的HTML里多个按钮用了相同的id="digits"，HTML规定ID必须是唯一的，后续用JS选择元素时会只返回第一个匹配的元素，建议把id="digits"改成class="digits"，同时把CSS里的#digits改成.digits。

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