Как динамически добавлять кнопки в div

У меня есть массив текста, который генерирует кнопки (см. пример кода), и сгенерированные кнопки затем должны быть добавлены в div, а не в тело.

Javascript

    <script>
        //let list = ["A","B","C"];
        let list = JSON.parse(localStorage.getItem("PrüfungenName"));
        let listBtns = [];
        let listPs = [];
            for (let i = 0; i < list.length; ++i) {
                var button = document.createElement("button");
                var p = document.createElement("p");
                p.innerHTML = "nicht durchgeführt";
                p.id = "p " + i;

                button.innerHTML = list[i];
                button.name = list[i];
                button.id = "Button " + i;

                button.labels = list[i];
                listBtns[i] = button;

                listPs[i] = p;
                button.addEventListener("click", OpenAndLoad());
                document.getElementById("AddedButtons").appendChild(button);
                document.getElementById("AddedButtons").appendChild(p);
            }
    </script>

    <div id = "AddedButtons"></div>

Сообщение об ошибке

Uncaught TypeError: Cannot read property 'appendChild' of null at ""

При попытке document.body.appenChild(button) это работает, но это не то, что я хочу.