Solution 1 :

I found the problem.

You were using

.newdiv

in CSS.

You are just only appending the newDivforlike elements

eg:-

 document.getElementById("datastore").appendChild(newdiv.appendChild(newdivforname));
                document.getElementById("datastore").appendChild(newdiv.appendChild(newdivformood));
                document.getElementById("datastore").appendChild(newdiv.appendChild(newdivforlatitude));
                document.getElementById("datastore").appendChild(newdiv.appendChild(newdivforlongitude));

is as same as

 document.getElementById("datastore").appendChild(newdivforname);
                document.getElementById("datastore").appendChild(newdivformood);
                document.getElementById("datastore").appendChild(newdivforlatitude);
                document.getElementById("datastore").appendChild(newdivforlongitude);

so, To fix this,

You need to firstly append all ‘newDivfor’ elements.

then append the newdiv element to datastore

ie:-

answer


newdiv.appendChild(newdivforname);
newdiv.appendChild(newdivformood);
newdiv.appendChild(newdivforlatitude);
newdiv.appendChild(newdivforlongitude);

document.getElementById("datastore").appendChild(newdiv)

Solution 2 :

Your code does not show dynamic addition of CSS style to .card (newdiv). You can do it as follows:

JS

//After the newdiv is created
document.querySelector('.card').style.color = "red";
//Other styles can be added likewise

Problem :

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');
            console.log(newdiv);
            newdiv.className = 'card';
            console.log(newdiv);

            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;

            console.log(newdiv);
            document.getElementById("datastore").appendChild(newdiv.appendChild(newdivforname));
            document.getElementById("datastore").appendChild(newdiv.appendChild(newdivformood));
            document.getElementById("datastore").appendChild(newdiv.appendChild(newdivforlatitude));
            document.getElementById("datastore").appendChild(newdiv.appendChild(newdivforlongitude));

I am adding some style to newdiv after creating it using javascript but its not reflecting any changes. Though when I console log newdiv it shows the attached css.

HTML

<div id="datastore"></div>

CSS

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

Comments

Comment posted by tomerpacific

Please share your html markup.

Comment posted by Musafiroon

Fixed your problem so, check it out

By