我刚刚开始学习如何编码。我已经尝试破解了将近3个小时，现在几乎是凌晨2点，但是没有任何结果……我将非常感谢我所能提供的所有帮助。
我正在尝试在每次单击指定按钮的地方编写代码，它将在CSS网格中添加一个新项目。我了解需要evenlistener，并且DOM是必需的。
我知道，如果根本没有项目（dashboardQuantity == 0），则用于运行CSS网格和第一个网格项目的DOM代码将需要运行。并且如果至少存在1个CSS网格项，则DOM代码将在旧的CSS网格项之前添加新的CSS网格项。
奇怪的是，这两个代码不能一起正常运行：1.如果在HTML文件中创建了CSS网格和第一项，然后使用DOM在旧项之前添加新项，则它可以正常工作。
如果我不添加网格和第一项的代码，而是运行DOM代码以添加CSS网格和第一项，那么它也可以正常工作。这是下面的“如果”部分。
但是！如果我没有用HTML编写任何东西，而是编写了所有DOM代码（用于网格，第一项以及以后的新项），那么该代码将根本无法工作。这是下面的“ else if”部分。
另外，如果HTML代码具有CSS网格和第一项，那么我只能从DOM添加一项。换句话说，我最多只能添加2个项目。这我真的不知道为什么...
HTML代码（注释部分为CSS网格+第一项）：
<body>
<button id="createDashboardButton"
class="main-action-button create-dashboard-button"></button>
<button id="rearrangeDashboardButton"
class="main-action-button rearrange-dashboard-button"></button>
<button id="deleteDashboardButton"
class="main-action-button delete-dashboard-button"></button>
<!--
<div id = dashboard-grid class="dashboard-grid">
<div class="dashboard-name">Dashboard 2</div>
</div>
-->
<script src="dom.js"></script>
</body>
对于JS文件（DOM）：
var dashboardQuantity = 0
// --------------------------------------------------------------------
// First Dashboard Creation
var createFirstDashboardDiv = document.createElement("div");
createFirstDashboardDiv.id = "dashboard-grid";
createFirstDashboardDiv.className = "dashboard-grid";
var forFirstDashboardCreation = document.querySelector("#deleteDashboardButton");
var firstDashboard = document.querySelector("script");
// --------------------------------------------------------------------
// For Dashboard Creation
var createDashboardDiv = document.createElement("div");
var createDashboardTextNode = document.createTextNode("Dashboard " + dashboardQuantity);
createDashboardDiv.id = "dashboard" + dashboardQuantity;
createDashboardDiv.className = "dashboard-name";
createDashboardDiv.appendChild(createDashboardTextNode);
var forDashboardCreation = document.querySelector("#dashboard-grid");
var oldDashboard = document.querySelector("body .dashboardName");
// --------------------------------------------------------------------
// Functions
function createDashboard(){
if (dashboardQuantity == 0){
dashboardQuantity += 1;
forFirstDashboardCreation.parentNode.insertBefore(createFirstDashboardDiv,
firstDashboard.nextSibling);
document.getElementById("dashboard-grid").appendChild(createDashboardDiv);
} else if (dashboardQuantity > 0){
dashboardQuantity += 1;
forDashboardCreation.insertBefore(createDashboardDiv,
forDashboardCreation.firstChild);
}
}
用于单击按钮以激活代码：
document.getElementById("createDashboardButton")
.addEventListener("click", createDashboard);
我真的非常感谢您的帮助...！预先谢谢！
我无法复制您尝试使用所提供的内容。但是，要解决此问题，您需要将click事件监听器附加到静态元素，以便在将新元素附加到DOM时可以选择它们。这称为“事件委托”。
<body>
<div id="static-parent">
<button id="createDashboardButton" class="main-action-button create-dashboard-button"></button>
<button id="rearrangeDashboardButton" class="main-action-button rearrange-dashboard-button"></button>
<button id="deleteDashboardButton" class="main-action-button delete-dashboard-button"></button>
<script src="dom.js"></script>
</div>
</body>
这里我已如前所述附加到父对象，并且仅在单击所需ID时才执行该功能。
var parent = document.getElementById("static-parent");
parent.addEventListener("click", function(event) {
if (event.target.id === "deleteDashboardButton") {
createDashboard();
}
});
您的代码的一个问题，是您做不到...
var forDashboardCreation = document.querySelector("#dashboard-grid");
它在DOM中尚不存在。您需要使用创建的元素，直到附加它。因此，您需要直接引用createFirstDashboardDiv而不是forDashboardCreation。