使用javascript动态地将元素添加到页面时，CSS不起作用

Question

我想动态地将新闻更新添加到页面。 当你登录时，你会得到20条新闻。向下滚动到底部，并有一个“更多”按钮。点击它，一些Ajax从服务器获取json格式的20多个。 Javascript将json解析成名称，日期，评论，图片等。

好消息是它有点作品。我可以为每个名称日期评论等创建文本节点，并将它们添加到一个id =“more”div中，并且它全部出现在blurb中。

我该如何将它变成与周围divs相同的格式？ 我会让这个尽量简短......

三栏布局，内部的三个栏布局...

<div class="wrapper threecol"> 
<div class="colmid"> 
    <div class="colleft"> 
     <div class="col1"> 
      <div class="friends"> 
      <div class="colwrap st-leftmenu"> 
       <c:forEach var="st" items="${news}"> 
       <div class="st-colleft"> 
       <div class="st-col1"> 
       <div class="statusName"> 
        ${st.name} 
       </div> 
         <%-- date, comment, pic etc. omitted --%> 

       </div> <%-- end st-col2 --%> 
       </div> <%-- end div class st-colleft --%> 
       </c:forEach> 
       </div> <%-- end div class colwrap st leftmenu --%> 

         <%-- add new stuff here dynamically --%> 
       <div id="showExtra"></div> 

       <a href="javascript:void(0)" onclick="moreStatus()">get more</a> 
      </div> <%-- end div class friends --%> 
      </div> <%-- end col1 --%> 

我想添加到ID =“showExtra” div，部分工作如上。 我试图在js中创建一个复杂的嵌套div结构。这让我的存在方式的一部分，但不能做到这一点的方式...... 这是一个有点乱，不好意思......

function showMoreStatus(){ 
var moreDiv = document.getElementById('showExtra'); 

var moreJSON = new Array(); 

if(request.readyState == 4) { 
    if (request.status == 200) { 
     moreJSON = eval('(' + request.responseText + ')'); 
     for(var i=0; i<moreJSON.length; i++) {    
      //get values from JSON 
      var JSONName = moreJSON[i][2]; 
          // and others... 

      //create text nodes, a href and img 
      var nameTextNode = document.createTextNode(JSONName); 
          // and other nodes, imgs, hrefs etc... 

          // surely this is NOT the way to do it!    
      //column divs 
      var outColDiv = document.createElement("div"); 
      outColDiv.setAttribute("class", "col1"); 
      var friendsDiv = document.createElement("div"); 
      friendsDiv.setAttribute("class", "friends"); 
      var colLeftDiv = document.createElement("div"); 
      colLeftDiv.setAttribute("class", "st-colleft"); 
      var col1Div = document.createElement("div"); 
      col1Div.setAttribute("class", "st-col1"); 
      var col2Div = document.createElement("div"); 
      col2Div.setAttribute("class", "st-col2"); 
      colLeftDiv.appendChild(col1Div); 
      colLeftDiv.appendChild(col2Div); 
      friendsDiv.appendChild(colLeftDiv); 
      outColDiv.appendChild(friendsDiv); 



      var nameDiv = document.createElement("div"); 
      nameDiv.setAttribute("class", "statusName"); 
          // and others... 

      // append nodes to divs 
      nameDiv.appendChild(nameTextNode); 

      col1Div.appendChild(nameDiv); 
      col1Div.appendChild(dateDiv); 
      col1Div.appendChild(contentDiv); 

      // append the page 
      moreDiv.appendChild(outColDiv); 
     } 
    } 
} 

}

尔加！感谢您阅读这些。

那么，那真的不是很简短。实际上，这可能是不必要的。

这里的正确方法是什么？ 如何获得nameTextNode及其所有朋友与$ {st.name}位于同一位置？

Answer 1

你没有显示你的CSS，所以很难准确地说出什么是破坏。我的猜测是，因为你在这个“showExtra”div中嵌套了新元素，所以你打破了CSS选择器。你或许应该只需要添加新的元素在同一水平作为现有的，那就是这个元素

<div class="colwrap st-leftmenu"> 

而且你可能需要看看你的代码中使用的ID属性里面。 ID应该是唯一的值，并根据您的循环结构，它看起来像你会得到多个具有相同的ID“statusNameDIV”的项目。

Answer 2

一般概念是，CSS应该适用于HTML元素，如果它们匹配给定的CSS选择器。即使你通过AJAX动态添加它们。

我会建议确保你的CSS是防弹的。我认为这可能是你的第一个痛点。如果您有新闻项目，建立一个列表中的HTML列表像这样：

<ul id="news"> 
    <li><!-- News Block 1 --></li> 
    <li><!-- News Block 2 --></li> 
    <li><!--  ...  --></li> 
    <li><!-- News Block N --></li> 
</ul> 

在每个新闻“块”，你可以构建一些HTML的需要。例如：

<li> 
    <h2>News title 1</h2> 
    <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.</p> 
    <p>Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.</p> 
    <a href="#" class="read-more">Read More about News 1</a> 
</li> 

然后，您可以为所有块设置“新闻块”。

#news h2{ 
    font-weight:600; 
    font-family:Arial, Sans-Serif; 
} 
#news .read-more{ 
    text-decoration:none; 
    color:#FF00FF; 
} 

从那里开始，您需要做的就是使用JavaScript/AJAX获取并格式化数据并附加LI“Block”。使用jQuery可以让这个变得简单。

下面是一些粗糙的pseduo代码：

// get news items from AJAX 
var newsList = $.ajax().getNews(10); 
// loop through all new news items 
for(i=0;i<newsList.size;i++) { 
    // get a formatted LI block 
    var block = formatNewsBlock(newsList[i]); 
    // append news block to end of news list 
    $('#news').append(block); 
} 

一个很好的结构，这可以帮助使事情变得更容易实现。

我希望能帮到一些！

干杯！