如何将 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