如何用JavaScript正确创建按钮 为何添加的按钮在Chrome中不显示

问题原因 #

• 你完成div和button元素的创建、内部节点拼接后，没有将外层div插入到页面的body节点中。未挂载到文档树的元素仅存在于JS内存中，不会被加入浏览器渲染树，因此页面不会展示对应内容。你能查看到节点的结构，是因为元素已经在内存中创建完成，只是没有插入到正式的文档流里。
• 你的代码还存在两处隐藏问题，后续点击按钮会触发报错：
  1. 点击回调中直接使用了未定义的body变量，需要通过document.body获取页面body节点
  2. style.backgroundColor是样式属性而非方法，不能用括号传参调用，需要用等号赋值

修复后代码 #

JS代码 #

const div = document.createElement("div");
const btn = document.createElement("button");
btn.innerText = "Click me";
div.appendChild(btn);
// 新增挂载逻辑，将div插入到body节点下
document.body.appendChild(div);

btn.addEventListener("click", function() {
  // 修正body获取和样式赋值写法
  document.body.style.backgroundColor = "red";
});

HTML代码（无需修改） #

<body>
  <script src="script.js"></script>
</body>

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