[解決済み] JavascriptのappendChild()が動作しない。

質問

以下がうまくいかず、困っています。

HTMLです。

    ...    
        <div class="col2">
            <h2>Your Groups</h2>
            <input type="submit" id="addnew" class="btn btn-primary" value="Create New Group"/> 
            <div id="parent">
                <!--new div here-->
            </div>
        </div> 
    ...

ジャバスクリプトです。

document.getElementById('addnew').onclick = function(){

    var parent = document.getElementById('parent'); 
    var newGroup = document.createElement("div"); 
    newGroup.setAttribute("id", "newGroup"); 
    newGroup.setAttribute("class", "inner");
    parent.appendChild(newGroup); 
};

よろしくお願いします。

どのように解決するのですか？

あなたのコードは動作しています（JSがこれらの要素の下に位置していると仮定して）。ただ、要素にコンテンツを設定していないだけです。

まず、ブラウザのウェブ開発者ツールについて学ぶ必要があります。F12キーを押し、表示されたウィンドウの「要素」タブで「親」divの位置を確認します。親要素が見つかったら、ボタンをクリックします。新しい div が "parent" の下に表示されるのがわかると思います。

しかし、コンテンツがないため、何もレンダリングされません。単純に

newGroup.textContent = "Hello, world!";

document.createElementで要素を作成した後、子要素にコンテンツが入るようになります。

また、各子供のidを同じ値に設定しないこと。HTMLのidは一意であることが前提です。また アドベントリスナー あなたのコードでは、onclickの代わりに