ボタンを作成する関数を作成する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は、ドキュメントにボタンを追加することができない、と述べたように、それはまさにそれです。

Answer 3

使用ボディは、DOM

document.body.appendChild(); 

に子を追加する：あなたはそれが動作しますdocument.appendChild(button);document.body.appendChild(button);に変更すると

：コンソールでこれを試してみる場合は、このエラーを取得する必要がありますconsole.log(btn);を実行すると、コードが正しいことを意味する関数に渡されたcharのボタンが返されます。唯一の間違いは、あなたが忘れていたことです。bodydocument
あなたが目に見える要素に追加する必要があるので、ここで は、

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を挿入することはできませんあなたがそれを行うならば、あなたは（少なくともFirefoxで）HierarchyRequestError: Node cannot be inserted at the specified point in the hierarchyを取得するコード取り組んでいるあなたページ、たとえばdocument.body。