:after with creating html elements through javascript

Question

I'm creating a website that loads content from a db through an ajax call and then writes the data by creating elements and appending them to their parent.

However, my CSS contains some styling for the ::after element, which isn't written when I append the html through JavaScript since appending elements to the html through JavaScript puts every element directly behind the previous one whilst you're leaving whitespace when you write plain html

Relevant 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%;
}

relevant self written 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);

The result is as you can see next Own html: correct

javascript: incorrect

When I put all "Thumb" divs on a new line by editing it through developer tools, everything works fine

Could you maybe put a jsbin/jsfiddle example? – Bwaxxlo Jul 13 '15 at 19:27 — Bwaxxlo, Jul 13 '15 at 19:27

score 0 · Answer 1 · answered Jul 13 '15 at 19:42

Your CSS looks like it is not formatted correctly. In order for the styling to work with multiple classes, you need to separate them with commas

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%;
}

:after with creating html elements through javascript

1 Answers1