为何JavaScript无法在页面上显示输入框中的数值？

你的代码里的核心问题出在DOM元素创建的赋值逻辑上：

const element = document.createElement('div').innerHTML = data

连续赋值会让element最终存储的是data的字符串值，而非创建的<div>DOM元素，但appendChild()仅接受DOM元素作为参数，因此无法完成添加操作。

修正后的代码 #

JavaScript 代码

function run() {
  const quest = document.getElementById('quest');
  const data = quest.value;
  // 先创建div元素，再设置内容
  const element = document.createElement('div');
  element.textContent = data; // 用textContent处理纯数值更安全
  const store = document.getElementById('store');
  store.appendChild(element);
}

HTML 代码

<h1>Calculator</h1>
<input type="number" name="" id="quest">
<button onclick="run()">=</button>
<div id="store"></div>

CSS 代码

body {
  text-align: center;
}

可选简化写法 #

如果追求代码简洁，也可以直接通过innerHTML拼接内容：

function run() {
  const data = document.getElementById('quest').value;
  document.getElementById('store').innerHTML += `<div>${data}</div>`;
}

注：这种方式适合快速实现，但如果输入内容不可信时存在XSS风险，不过这里是type="number"的输入，风险极低。

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