时间戳

首页 > 解决方案 > 无法为在 JavaScript 中创建的 div 按钮设置值

javascript - 无法为在 JavaScript 中创建的 div 按钮设置值

问题描述

我正在尝试将按钮动态添加到 JS 中的 div 中。我可以在没有设置按钮值的情况下执行此操作（即空白按钮），但是一旦我尝试为按钮添加值，div 就会消失。知道为什么这不起作用吗？

var btn = document.createElement("button");
btn.id = "myBtn";
document.getElementById("myBtn").value = "test"; // This is causing the problem
div.appendChild(btn);

标签： javascripthtml

解决方案

您混淆了 2 行。将最后两行切换为：

document.getElementById("myBtn").value = "test"; // This is causing the problem
div.appendChild(btn);

document.getElementById 仅查找已添加到 DOM 的元素。所以如果你把它添加到 DOM 中，然后通过 id 获取它，你不会有任何问题。实际上，在您展示的示例中，您甚至根本不需要使用 document.getElementById。您已经有了对 HTMLButtonElement 的引用。

所有你需要的是：

var btn = document.createElement("button");
btn.id = "myBtn";
btn.value = "test"; // This is causing the problem
div.appendChild(btn);

顺便说一句，您是否打算将“测试”作为按钮文本？然后你应该使用：

btn.innerHTML = "test"

代替：

btn.value = "test".

推荐阅读