：通过javascript创建html元素后[重复]

Question

我正在创建一个网站，该网站通过 ajax 调用从数据库加载内容，然后通过创建元素并将它们附加到其父元素来写入数据。

但是，我的 CSS 包含 ::after 元素的一些样式，当我通过 JavaScript 附加 html 时不会编写这些样式，因为通过 JavaScript 将元素附加到 html 会在您离开时将每个元素直接放在前一个元素的后面编写纯 html 时的空格

相关css：

.Review .Thumb {
    display: inline-block;
    margin-bottom: 5px;
    width: 15%;
    cursor: hand;
    cursor: pointer;
    zoom: 1;
    *display: inline;
}
.Review .Thumbs:after {
    content: "";
    width: 100%;
    display: inline-block;

    zoom: 1;
    *display: inline;   
}
.Review .Thumb img {
    width: 100%;
}  

相关的自写html：

<div class="Thumbs">
    <div class="Thumb" onClick="ViewThumb(1,1)">
         <img src="images/pictures/pic2.png" id="Review_1_Picture_1" border="0" title="Voorgerecht">
    </div>
    <div class="Thumb" onClick="ViewThumb(1,2)">
         <img src="images/pictures/pic1.png" id="Review_1_Picture_2" border="0" title="Hoofdgerecht">
    </div>
    <div class="Thumb" onClick="ViewThumb(1,3)">
         <img src="images/pictures/pic3.png" id="Review_1_Picture_3" border="0" title="Dessert">
    </div>
    <div class="Thumb" onClick="ViewThumb(1,4)">
         <img src="images/pictures/pic4.png" id="Review_1_Picture_4" border="0" title="Tafeldekking">
    </div>
    <div class="Thumb" onClick="ViewThumb(1,5)">
         <img src="images/pictures/pic5.png" id="Review_1_Picture_5" border="0" title="Sfeerbeeld">
    </div>
</div>

javascript：

var thumbsDIV = document.createElement('div');
thumbsDIV.className = 'Thumbs';
for(var i=0; i < this.pictures.length; i++) {
    var pictureID = this.pictures[i].pictureID;
    var thumbDIV = document.createElement('div');
    thumbDIV.className  = 'Thumb';
    thumbDIV.onclick = function(){ViewThumb(iD, pictureID);};
    var thumbIMG = document.createElement('img');
    thumbIMG.id = 'Review_' + this.iD + '_Picture_' + this.pictures[i].pictureID;
    thumbIMG.src = this.pictures[i].picture;
    thumbIMG.title = this.pictures[i].description;
    thumbIMG.border = '0';
    thumbDIV.appendChild(thumbIMG);
    thumbsDIV.appendChild(thumbDIV);
}
picturesDIV.appendChild(thumbsDIV);
parentDIV.appendChild(picturesDIV);

结果如下所示 自己的html：

javascript:

当我通过开发人员工具将所有“Thumb”div 放在新行上时，一切正常

Answer 1

您的 CSS 看起来格式不正确。为了使样式与多个类一起使用，您需要用逗号分隔它们

http://jsfiddle.net/bgerhards/qdrudpba/

.Review, .Thumb {
    display: inline-block;
    margin-bottom: 5px;
    width: 15%;
    cursor: hand;
    cursor: pointer;
    zoom: 1;
    *display: inline;
}
.Review, .Thumbs:after {
    content: "";
    width: 100%;
    display: inline-block;

    zoom: 1;
    *display: inline;   
}
.Review, .Thumb img {
    width: 100%;
}