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
– skobaljic, Commented Aug 13, 2019 at 9:43
prntscr.com/os0mdu it look like this. It just doesnt receive the css file. — someoneuseless
– someoneuseless, Commented Aug 13, 2019 at 9:48

Rory McCrossan · Accepted Answer · 2019-08-13 09:47:00Z

1

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.

answered Aug 13, 2019 at 9:47

Rory McCrossan

338k41 gold badges321 silver badges353 bronze badges

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

Comments

suspectus · Accepted Answer · 2019-08-13 09:46:59Z

1

Add to the link the rel attribute-:

 u.rel  = 'stylesheet';

answered Aug 13, 2019 at 9:46

suspectus

17.4k8 gold badges56 silver badges63 bronze badges

Comments

t hj · Accepted Answer · 2019-08-13 09:44:25Z

-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, 2019 at 9:44

t hj

934 bronze badges

Collectives™ on Stack Overflow

Append css file by jquery but css file not working

3 Answers 3

Comments

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related