Append css file by jquery but css file not working

Question

I have a Jquery code append both Css and Js file to create a banner-slider with Owlcarousel.

The jquery code had appended both into html. The function .owlCarousel() work fine but the css don't. In console, it only GET the owl.carousel.js file.

The one I found most like is this I already tried but count not get it working.

Jquery

$(document).ready(function(){
        var u = document.createElement("link");
        u.type = "text/css";
        u.href = "https://myurl/OwlCarousel/dist/assets/owl.carousel.css";
        $("#lookbookslider-2").append(u);

        var t = document.createElement("script");
        t.type = "text/javascript";
        t.src = "https://myurl/OwlCarousel/dist/owl.carousel.js";
        $("#lookbookslider-2").append(t);
        $.getScript("https://myurl/OwlCarousel/dist/owl.carousel.js");

  $("#lookbookslider-2").append("html here");

});

I dont have access to html file. I can only work with my js file. How can I make the css file working? Or I have to append all the style directly?

Your scripts seems just fine, maybe element with ID `lookbookslider-2` does not exist in the time script runs? Try appending to `$("body")` instead. — skobaljic, Aug 13 '19 at 09:43
http://prntscr.com/os0mdu it look like this. It just doesnt receive the css file. — someoneuseless, Aug 13 '19 at 09:48
Possible duplicate of [adding css file with jquery](https://stackoverflow.com/questions/5680657/adding-css-file-with-jquery) — Chetan Naik, Aug 13 '19 at 09:48

score 1 · Answer 1 · answered Aug 13 '19 at 09:46

1

Add to the link the rel attribute-:

 u.rel  = 'stylesheet';

answered Aug 13 '19 at 09:46

suspectus

16,548
8
49
57

score 1 · Accepted Answer · answered Aug 13 '19 at 09:47

You're missing the rel attribute from the link attribute. Also note that type is not needed. Try this:

var u = document.createElement("link");
u.rel = "stylesheet";
u.href = "https://myurl/OwlCarousel/dist/assets/owl.carousel.css";
$("#lookbookslider-2").append(u);

However it's worth noting that this can be simplified if you use jQuery to create the <link /> element, and also you should append the new stylesheet reference in to the head:

var $link = $('<link />', {
  rel: 'stylesheet',
  href: 'https://myurl/OwlCarousel/dist/assets/owl.carousel.css'
}).appendTo('head');

Finally, note that appending stylesheets at runtime is a little bit of an anti-pattern. If you're trying to make the page more efficient, I'd suggest using bundling and minification of your CSS and JS, and then include all required references through HTML on page load.

score -1 · Answer 3 · answered Aug 13 '19 at 09:44

-1

You can try this

$(document).ready(function(){
$('head').append('<link rel="stylesheet" href="https://myurl/OwlCarousel/dist/assets/owl.carousel.css" type="text/css" />');
});

answered Aug 13 '19 at 09:44

t hj

93
4

Append css file by jquery but css file not working

3 Answers3