为何JS动态创建的.row元素无法被CSS选中？技术咨询

问题场景 #

你通过以下JS代码动态创建div元素：

const container = document.querySelector('#container');
for(let i = 1; i < 17; i++) {
    var row = document.createElement('div');
    row.id = 'r' + i;
    row.class = 'row';
    container.appendChild(row);
    for(let j = 1; j < 17; j++) {
        var newDiv = document.createElement('div');
        newDiv.id = 'c' + j;
        newDiv.class = 'box';
        newDiv.textContent = row.id;
        row.appendChild(newDiv);
    }
}

随后用CSS尝试为.row类元素添加绿色边框：

#row {
    border: 1px solid green;
}

但.row元素并未显示绿色边框，同时你想确认：能否用CSS选中JS动态创建的元素？预期效果是16个带.row类的div各包含16个子元素并显示绿色边框。

问题原因 #

1. JS中类名设置错误

DOM元素的类名属性是className，而非class——class是JavaScript的关键字，不能直接作为对象属性使用。你写的row.class = 'row'根本没有给元素添加类名，所以这些div实际上没有.row类，自然无法被CSS匹配。

2. CSS选择器写错

你用了#row，这是ID选择器，只会匹配ID为row的元素，但你给每个行div设置的ID是r1、r2...r16，并非row。而你要选中的是类名为row的元素，应该用类选择器.row。

关于动态创建元素的CSS选中问题 #

当然可以用CSS选中JS动态创建的元素。CSS是基于当前DOM树进行样式匹配的，不管元素是静态写在HTML里，还是通过JS动态添加到DOM中的，只要元素的类名、ID或其他属性符合选择器规则，就能被CSS选中并应用样式。

修正后的代码 #

修正JS代码（设置正确的类名）

const container = document.querySelector('#container');
for(let i = 1; i < 17; i++) {
    var row = document.createElement('div');
    row.id = 'r' + i;
    // 方式1：使用className设置类名
    row.className = 'row';
    // 方式2：使用classList.add（推荐，支持添加多个类名且不会覆盖原有类）
    // row.classList.add('row');
    container.appendChild(row);
    for(let j = 1; j < 17; j++) {
        var newDiv = document.createElement('div');
        newDiv.id = 'c' + j;
        newDiv.className = 'box';
        newDiv.textContent = row.id;
        row.appendChild(newDiv);
    }
}

修正CSS代码（使用正确的选择器）

.row {
    border: 1px solid green;
}

修改后，16个带.row类的div会正确显示绿色边框，每个div包含16个.box类的子元素，符合你的预期。

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