创建一个创建按钮HTML / JS的函数

Question

我正在尝试创建一个带有字符的函数，并在其中创建一个带有字符的按钮。这就是我到目前为止所拥有的：

function keyButton(char) {
  var btn = document.createElement("button"); //create button
  btn.innerText = char; //fill it with char
  return btn;
    }

  var button = keyButton("a"); //use keyButton to fill buttons with characters
  document.appendChild(button);

但这似乎无效，任何帮助都会受到赞赏。

Answer 1

我认为您可以使用document.createTextNode制作文字节点并将按钮附加到document.body。

＆＃13;

＆＃13;

function keyButton(char) {
    var btn = document.createElement("button");
    btn.appendChild(document.createTextNode(char));
    return btn;
}

var button = keyButton("a");
document.body.appendChild(button);

＆＃13;

＆＃13;

＆＃13;

Answer 2

正如@Pointy说的那样，你不能将按钮附加到文档中。如果您在控制台中尝试此操作，则应该收到此错误：

如果您将document.appendChild(button);更改为document.body.appendChild(button);，则会有效：

Answer 3

使用body在dom中追加孩子

document.body.appendChild(); 

如果你console.log(btn);它返回带有char的按钮，你已经传递了函数，这意味着你的代码是正确的。你唯一的错误就是忘记了body document 这是工作代码

function keyButton(char) {
  var btn = document.createElement("button"); //create button
  btn.innerText = char; //fill it with char
  return btn;
    }

  var button = keyButton("a"); //use keyButton to fill buttons with characters
console.log(button);
 document.body.appendChild(button);

Answer 4

您无法向button插入document，如果您这样做，您将获得HierarchyRequestError: Node cannot be inserted at the specified point in the hierarchy（至少在Firefox中），因此您必须将其添加到可见您网页中的元素，例如document.body。