使用JavaScript动态添加元素时关联CSS样式不生效问题咨询

• DOM插入逻辑错误：appendChild()方法的返回值是被插入的子元素，而非父元素。现有代码执行时，会先将子元素（如newdivforname）插入到带.card类的newdiv中，随后直接将子元素挂载到datastore容器下，最终带.card类的newdiv未被插入到页面DOM树，仅存在于内存中，对应样式无法生效。
• CSS属性写法不规范：font是简写属性，仅配置字重900不符合语法规则，浏览器会直接忽略整条font声明，就算后续DOM逻辑修复，字重效果也不会生效。

1. 修正JavaScript插入逻辑 #

先把所有子元素插入到带.card类的newdiv中，最后再将整个newdiv插入到datastore容器即可：

function render(recievedData) {
    let a = 0;
    const info = JSON.parse(recievedData);
    console.log(info);
    if (info[a] === null)
        return;
    else {
        info.forEach(element => {
            console.log(element);
            var newdiv = document.createElement('div');
            newdiv.className = 'card';

            var newdivforname = document.createElement('div');
            var newdivformood = document.createElement('div');
            var newdivforlatitude = document.createElement('div');
            var newdivforlongitude = document.createElement('div');

            newdivforname.innerText = element.name;
            newdivformood.innerText = element.mood;
            newdivforlatitude.innerText = element.latitude;
            newdivforlongitude.innerText = element.longitude;

            // 先将所有子元素插入带card类的父容器
            newdiv.appendChild(newdivforname);
            newdiv.appendChild(newdivformood);
            newdiv.appendChild(newdivforlatitude);
            newdiv.appendChild(newdivforlongitude);
            // 最后将父容器整体插入页面
            document.getElementById("datastore").appendChild(newdiv);
        });
    }
}

2. 修正CSS写法 #

将不规范的font简写属性替换为单独的font-weight属性即可：

.card{
    font-weight: 900;
    color: red;
    background: lightgreen;
}

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