时间戳

首页 > 解决方案 > 如何动态添加按钮到 div

javascript - 如何动态添加按钮到 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>

错误信息

未捕获的类型错误：无法在“”处读取 null 的属性“appendChild”

尝试document.body.appenChild(button)时它有效，但这不是我想要的。

标签： javascripthtml

解决方案

将您的脚本放在 div 之后。执行 yoir 脚本时，该 div 将不存在。或者，在dom 准备好时执行的脚本周围添加一个函数。

推荐阅读