javascript - :after with creating html elements through javascript

Question

这个问题已经有答案了:

:after when inserting html through JavaScript (2 个回答)

已关闭 8 年前。

我正在创建一个网站，该网站通过 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%;
}