DOM为子Javascript分配一个id

我已经用div、class和id创建了一个网格。我想随机创建一个黄色的正方形，我想分配一个id='yellowSquare'，我该怎么做

var grid=document.getElementById（“网格框”）；
对于（变量i=1；i除以平方）{
字号：1rem；
垂直对齐：顶部；
显示：内联块；
宽度：10%；
身高：10%；
框大小：边框框；
边框：1px实心#000；
}

---

使用HTMLElement方法

setAttribute

（）

---

您的问题有两个选项。您可以更改已从代码中创建的黄色正方形的id，也可以在正方形内创建一个子元素，该子元素看起来与当前解决方案相同。创建新的子元素将使您保留网格的数字id模式：

更改ID:

var element = document.getElementById('square' + randomIndex)
element.id = "yellowSquare";

在内部添加新元素：

var node = document.createElement("DIV");
node.id = "yellowSquare";
node.style = "background-color:yellow;height:100%;width:100%;";
var element = document.getElementById('square' + randomIndex)
element.appendChild(node);

我将div子级的样式设置为100%宽度和高度，因为它没有内容，如果没有指定任何内容，则会得到0值。这将使它填充父容器

---

还有其他多种方法可以达到相同的效果，例如JQuery。

正如您在评论中要求的那样，如何移动正方形我举了一个例子，说明如何使用JQuery

next（）

和

prev（）左右移动正方形

函数。但是，由于html元素是一维的，因此不容易上下移动它们并检查侧面是否有冲突。最好是创建html表格，就像创建行和列一样，这样可以创建一个二维游戏场

还使用

$drawPone.addClass（'yellowSquare'）；

添加了一个yellowSquery类供选择

另外，由于您喜欢使用jQuery，我将您现有的代码更改为jQuery函数。这可能有助于您学习框架

var$grid=$（“#网格框”）；
对于（变量i=1；i除以平方）{
字号：1rem；
垂直对齐：顶部；
显示：内联块；
宽度：10%；
身高：10%；
框大小：边框框；
边框：1px实心#000；
}
.黄色广场{
背景颜色：黄色；
}

左边
正确的

您的代码似乎已经完成了您请求帮助的操作：）编辑：…除了ID是…您正在寻找在正方形内创建子元素的方法，还是现在只给黄色正方形一个新ID？

drawPone.ID=“yellowSquare”

？您想在“程序”中更改什么？看起来你的代码已经完成了你要求的事情。也许OP想要更改已经分配的

id

？那么@freedomn-m是正确的。否则需要澄清。你制作的黄色方块已经有一个id

'square'+i

-如果你将该id更改为

yellowSquare

，那么它将不再有原版nal id因此将无法以这种方式引用。我建议您保留原始索引id并使用

类来代替：
$（drawPone）.addClass（“yellowSquare”）
（标记为jquery）-然后可以使用
$（“.yellowSquare”）
引用它，而不必销毁索引id。
var node = document.createElement("DIV");
node.id = "yellowSquare";
node.style = "background-color:yellow;height:100%;width:100%;";
var element = document.getElementById('square' + randomIndex)
element.appendChild(node);