Applying external css stylesheet to dynamically added html content using jquery

Question

I am having a hard time applying an external css template to dynamically added html content with jquery. I am using this HTML template and the corresponding css file: https://html5up.net/multiverse .

The html is being added to the page, but I cannot get the main.css file from the multiverse template to style the dynamically added content. The javascript code I am using is below:

// Paths to S3 buckets
var s3BucketURL     = "https://s3.amazonaws.com/BUCKETNAME";
var s3ThumbnailsURL = "https://s3.amazonaws.com/BUCKETNAME";
var JSONfile        = "https://s3.amazonaws.com/BUCKETNAME/album_covers.json";

// Dynamically add HTML for images in album display
function generateAlbumCoversHTML(){
    // AJAX request to file on S3 bucket
    $.getJSON(JSONfile, function(photos) {
        // Iterate over albums and create album cover HTML
        var htmlToAdd = '';
        for (var album in photos) {
            if (photos.hasOwnProperty(album)) {
                var photo      = photos[album].split('/');
                photo          = photo[photo.length-1];
                var fullsize   = s3BucketURL + '/' + album + '/' + photo;
                var thumbnail  = s3ThumbnailsURL + '/' + photo;
                console.log(htmlToAdd);
                var html = 
                    `<article class="thumb">` +
                        `<a href=${fullsize} class="image"><img src=${thumbnail} alt="" /></a>` +
                            `<h2>${album}</h2>`+
                     `</article>`;
                htmlToAdd += html;
            }
        }
    $("#main").append(htmlToAdd);
    })
}

I modified the multiverse html template and deleted all the tags within the tag to

<!-- Main -->
    <div id="main"></div>

And from here I can append my HTML code within this div tag by calling my function at the end of the HTML code where I define all the additional javascript files I am using as

    <!-- Scripts -->
    <script src="assets/js/jquery.min.js"></script>
    <script src="assets/js/jquery.poptrox.min.js"></script>
    <script src="assets/js/skel.min.js"></script>
    <script src="assets/js/util.js"></script>
    <!--[if lte IE 8]><script src="assets/js/ie/respond.min.js"></script><![endif]-->
    <script src="assets/js/main.js"></script>
    <script src="assets/js/custom.js"></script>
    <script type="text/javascript">generateAlbumCoversHTML();</script>

Note: I have checked several references to similar problems as this one but with no luck: apply loaded CSS to dynamically created HTML .

Answer 1

CSS doesn't care if the HTML was added dynamically, don't worry about that. Your CSS either isn't loaded or is bad (you said you'd changed the template, so maybe the CSS selectors don't apply anymore).