制作創建按鈕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 。

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

Answer 2

就像@Pointy所說的那樣，您不能將按鈕附加到文檔中。 如果您在控制台中嘗試此操作，則應收到此錯誤：

如果更改document.appendChild(button); 到document.body.appendChild(button); 它會工作：

Answer 3

使用身體將孩子添加到dom中

document.body.appendChild(); 

如果您執行console.log(btn); 它返回帶有char的按鈕，您已傳入函數，這意味着您的代碼是正確的。您唯一的錯誤是您忘記了帶有document body
這是工作代碼

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

您無法在document插入button ，如果這樣做，則會出現HierarchyRequestError: Node cannot be inserted at the specified point in the hierarchy （至少在Firefox中），因此必須將其添加到您的可見元素中頁面，例如document.body 。