Appended Div not forming to class name on creation?

Question

Appended Div not forming to class name on creation?

I'm making a little CMS for the news feed on the front page of my webpage, and when an Admin submits news to the newsfeed, I want to show the newly created news on the page, I currently have

function showResponse(data) {
  console.log('Triggered');

    var rowDiv = document.createElement('div');
    rowDiv.id = 'rowDiv';


    var titleSpan = document.createElement('div');
    titleSpan.className = 'span9';
    titleSpan.innerHTML = data.success.title;
    console.log(titleSpan);

    var timeSpan = document.createElement('div');
    timeSpan.className = 'span9';
    timeSpan.innerHTML = data.success.createdAt;
    console.log(timeSpan);

    var bodySpan = document.createElement('div');
    bodySpan.className = 'span9';
    bodySpan.innerHTML = data.success.body;
    console.log(bodySpan);

    document.getElementById('newsfeed').appendChild(rowDiv);
    document.getElementById('rowDiv').appendChild(titleSpan);
    document.getElementById('rowDiv').appendChild(timeSpan);
    document.getElementById('rowDiv').appendChild(bodySpan);

}

// Jade template for node 
   div#newsfeed
     for info in newsFeed
      div(class='row', style='border-bottom: 1px solid lightgrey; margin-bottom: 1%; padding-top: 1%;')
       div.span9
        h2=info.title
       div.span9
        p.muted.credit=info.createdAt
       div.span9
        p= info.body

That little jade portion at the bottom is just the html templating language I'm using with Node.js, so this works great, the only problem is, when it is added to the page, it doesn't seem to have any css styling at all from its class name, does anybody know why that would be? enter image description here

javascript
node.js

Answer 1

first of all, you are doing this wrong way, second, you didn't add class to rowDiv

var rowDiv = document.createElement('div');
rowDiv.className = "row" // <- this is your problem
rowDiv.style = "border-bottom: 1px solid lightgrey; margin-bottom: 1%; padding-top: 1%;" // <- and this you should identify in css
var titleSpan = document.createElement('div');
titleSpan.className = 'span9';
titleSpan.innerHTML = data.success.title;
rowDiv.append(titleSpan);
var timeSpan = document.createElement('div');
timeSpan.className = 'span9';
timeSpan.innerHTML = data.success.createdAt;
rowDiv.append(timeSpan);
var bodySpan = document.createElement('div');
bodySpan.className = 'span9';
bodySpan.innerHTML = data.success.body;
rowDiv.append(bodySpan);
document.getElementById('newsfeed').appendChild(rowDiv);

and if you are already generating page on-fly, try to check out js templating system like ejs, so you can store templates in more appropriate manner