如何將 JavaScript 文件中創建的元素添加到 HTML 頁面

Question

我正在嘗試在 js 文件中創建一個元素，然后將其添加到游戲所在的 html div

我正在嘗試創建一個 createMine function，它創建一個具有 in.mine 樣式的新元素，然后將其添加到 html 游戲 div。

 var newMine = document.createElement("div"); newMine.classList.add(".mine"); document.getElementById("game").appendChild(newMine);

 .mine { width: 20px; height: 20px; background-color: blue; position: relative; display: inline; }

 <div id="game"> <button id="startButton">Click To Start</button> <div id="gameElements"> <div id="character"> </div> </div> </div>

Answer 1

您的代碼工作正常，除了兩個問題：

1. newMine.classList.add(".mine"); 應該是newMine.classList.add("mine"); （在添加 class 時不要使用. ，其唯一目的是告訴 CSS 以下是 CSS 類）。

2. 具有display: inline的元素不接受height或width 。 使用display: inline-block代替。

Answer 2

 var newMine = document.createElement("div"); newMine.classList.add("mine"); document.getElementById("game").appendChild(newMine);

 .mine{ width: 20px; height: 20px; background-color: blue; position: relative; display: inline-block; }

 <div id="game"> <button id="startButton">Click To Start</button> <div id="gameElements"> <div id="character"></div> </div> </div>

使用 classlist 時，不要在開頭寫一個點以使其正常工作。 正如@connexo 所說，使用 inline-block