JavaScript问题：无法在Grid指定行列位置添加Div

你的代码存在几个关键错误，导致无法成功向Grid中添加元素：

1. DOM元素获取方法缺失前缀 #

getElementById 是document对象的内置方法，直接调用会抛出未定义错误，必须加上document.前缀才能正确获取DOM元素。

2. CSS行内样式赋值语法错误 #

设置Grid位置时，不能用函数调用的写法（比如div.style.gridColumnStart(tilex)），正确方式是给样式属性赋值：

• gridColumnStart、gridColumnEnd、gridRowStart、gridRowEnd 都是样式属性，需通过等号赋值
• 也可以使用gridColumn和gridRow的简写形式，一次性设置起始与结束位置

3. 脚本执行时机问题 #

如果外部JS文件放在HTML头部，DOM还未加载完成就执行脚本，会找不到tileGrid容器。必须确保脚本在DOM渲染完成后运行。

修正后的完整代码 #

JavaScript文件

function Tile(tilex, tiley) {
  this.tilex = tilex;
  this.tiley = tiley;

  this.initTile = function() {
    const div = document.createElement('div');
    div.id = `tile${tilex}_${tiley}`;
    div.className = "tile";
    div.innerHTML = "X";
    // 正确设置Grid位置：使用赋值语法
    div.style.gridColumnStart = tilex;
    div.style.gridColumnEnd = tilex + 1;
    div.style.gridRowStart = tiley;
    div.style.gridRowEnd = tiley + 1;
    // 也可以用简写形式替代上面四行：
    // div.style.gridColumn = `${tilex} / ${tilex + 1}`;
    // div.style.gridRow = `${tiley} / ${tiley + 1}`;
    
    // 正确获取Grid容器并添加元素
    const gridContainer = document.getElementById("tileGrid");
    gridContainer.appendChild(div);
  }
}

// 确保DOM加载完成后执行代码
document.addEventListener('DOMContentLoaded', function() {
  const tile7_1 = new Tile(7, 1);
  tile7_1.initTile();
});

HTML文件（注意脚本位置）

<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <title>棋盘Grid</title>
  <link rel="stylesheet" href="你的样式文件路径.css">
</head>
<body>
<div class="grid" id="tileGrid">
  <div class="tile" id="tile1">1</div>
  <div class="tile" id="tile2">2</div>
  <div class="tile" id="tile3">3</div>
  <div class="tile" id="tile4">4</div>
</div>
<!-- 脚本放在body末尾，或用DOMContentLoaded事件包裹，二选一即可 -->
<script src="你的JS文件路径.js"></script>
</body>
</html>

CSS文件（无需修改，保持原代码）

body {
  background-color: rgba(236, 150, 119, 0.726);
}

.grid {
  display: grid;
}

#tileGrid {
  background-color: rgb(20, 20, 20);
  padding: 2px;
  grid-template-columns: repeat(15, 20px);
  grid-template-rows: repeat(25, 20px);
  grid-auto-columns: 20px;
}

.tile {
  background-color: rgba(100, 200, 100, 0.8);
  border: 1px solid rgb(20, 20, 20);
  font-size: 10px;
}

内容的提问来源于stack exchange，提问作者hiphop4eva