无法为在 JavaScript 中创建的 div 按钮设置值 [重复]答案

【问题标题】：Can't set value for div button created in JavaScript [duplicate]无法为在 JavaScript 中创建的 div 按钮设置值 [重复]
【发布时间】：2020-06-12 06:48:43
【问题描述】：

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

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

【问题讨论】：

btn.innerText = "test"; 此外，在您附加按钮之前，该按钮不是 DOM 的一部分，因此在此之前不要使用 document.getElementById

标签： javascript html

【解决方案1】：

您混淆了 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".

【讨论】：

感谢您的解释。我在 DIV 之后使用了 btn.innerHTML，这很有效。

【解决方案2】：

您不需要通过 id 获取按钮，您已经将它作为变量 btn，而不是在文档中。试试吧：

btn.value = "test";

【讨论】：