0

我正在为网页首页上的新闻提要制作一个小 CMS，当管理员向新闻提要提交新闻时，我想在页面上显示新创建的新闻，我目前有

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

底部的小玉部分只是我使用的 html 模板语言Node.js，所以效果很好，唯一的问题是，当它添加到页面时，它似乎根本没有任何 css 样式它的类名，有人知道为什么会这样吗？在此处输入图像描述

4

1 回答 1

0

首先，您这样做是错误的，其次，您没有将类添加到 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);

如果您已经在动态生成页面，请尝试检查 js 模板系统，例如ejs，以便您可以以更合适的方式存储模板

于 2013-04-13T04:32:40.853 回答