After adding elements by JavaScript CSS hack don't work

Question

I use a hack to justify divs in the container (marked answer). It works perfectly in static HTML.

<div id="gallery-thumbnails">
    <div class="gallery-thumbnail">
        <img src="1.jpg" alt="alt" title="title">
    </div>
    <div class="gallery-thumbnail">
        <img src="2.jpg" alt="alt" title="title">
    </div>
    <div class="gallery-thumbnail">
        <img src="3.jpg" alt="alt" title="title">
    </div>
    <div class="gallery-thumbnail">
        <img src="4.jpg" alt="alt" title="title">
    </div>
    <span class="stretch"></span>
</div>

But when I do this via JS, the hack itself don't work (color styles are applied, I see pictures). Hovewer, the diff tool says that static and generated versions of DOM are identical.

Here's the code

var thumbnailsContainer = $('#gallery-thumbnails');
$(thumbnailsContainer).children('*').each(function() {
    $(this).remove();
});

$(lists[index]).children('img').each(function(index, picture) {
    var thumbnail = $('<div>', { class: "gallery-thumbnail" });
    var thumbnailImage = $('<img>', { src: $(picture).attr('src'), alt: $(picture).attr('alt'), title: $(picture).attr('title') });
    $(thumbnail).append(thumbnailImage);
    $(thumbnailsContainer).append(thumbnail);
});

$(thumbnailsContainer).append($('<span>', { class: 'stretch'} ));

Update

JSFiddle is here. If you comment the JS code and re-run, you'll see what I intent to do. If you uncomment, you'll see me failin'.

@cgatian The hack. Divs are not justified when I make DOM via JS. — efpies
– efpies, Commented Oct 15, 2013 at 0:20

Oriol · Accepted Answer · 2013-10-15 00:42:34Z

1

The problem is that you need spaces between elements, so just add

$thumbnailsContainer.append(' ');

Demo

answered Oct 15, 2013 at 0:42

Oriol

291k71 gold badges459 silver badges535 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

efpies Over a year ago

Unbelieveable! You're my savior. But can you explain this? It looks like a sort of magic for me.

Oriol Over a year ago

You need spaces because if there's anything between your elements, anything can separate them, and you want them to be separated.

Collectives™ on Stack Overflow

After adding elements by JavaScript CSS hack don't work

Update

1 Answer 1

2 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

Update

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related