CSS没有'使用javascript向页面动态添加元素时无法工作

我想动态地向页面添加新闻更新。当你登录时，你会得到20条新闻。向下滚动到底部，有一个"更多"按钮。单击它，一些ajax会从服务器上以json形式再获取20个。Javascript将json解析为名称、日期、注释、图片等。

好消息是它有点奏效。我可以为每个名称、日期注释等创建文本节点，并将它们添加到id="more"div中，这一切都会在简介中出现。

如何将其转换为与周围div相同的格式？我会尽可能简短地说。。。

三列布局，内部三列布局。。。

<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}坐在同一个地方？