使用innerHTML为type=text的input赋值失败，求解决方案

嘿，这个坑我踩过好多次！你之所以看不到内容，是因为input这类表单元素根本不是用innerHTML来设置显示文本的——这是普通容器元素（比如div、p）的玩法，表单控件有自己的规则。

问题根源 #

input是自闭合的表单元素，它的输入/显示内容是通过value属性来管理的，浏览器渲染时会读取这个属性的值来展示文本，而不是去解析它的innerHTML（毕竟它也没有标签内部的内容区域）。

正确的写法 #

把代码改成直接操作value属性就可以了：

document.getElementById('total').value = 'hi';

额外补充 #

你提到用className操作无效，这是因为className是用来控制元素的CSS类名（也就是样式）的，和文本内容完全不相关。如果是想给input加样式，className没问题，但要改显示的文本，必须用value。

给你一个完整的示例参考：

<input type="text" id="total">
<script>
// 页面加载完成后赋值
window.onload = function() {
  document.getElementById('total').value = 'hi';
};
</script>

这样运行后，文本框里就会正常显示"hi"啦！

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