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)
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
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;
}
Please share your html markup.