Inject HTML and CSS using jquery but have the CSS in a separate file?

Question

I'm building something that is going to inject HTML into a users website via Jquery hosted on my server (their just going to include my script like they do other Javascript already).

So I have my HTML injecting; how can I not write inline style CSS with the injected HTML?

The only idea I have is to query my server for this external javascript file at the beginning of my Jquery. I'm not sure how to make both the CSS and Jquery available to the user's browser though.

Any thoughts? I'm doing something like the below, FYI.

$(document).ready(function() {
$('body').find(":last").after("
<div class='spacer'></div><div id='nav_menu_wrapper'><div class='nav_menu'>");
});

Matt Ball · Accepted Answer · 2011-04-29 14:33:06Z

2

You can use jQuery to inject a <link> tag with the href pointing to wherever you serve the script:

$('head').append(
    $('<link/>', {href: '//path.to/your/stylesheet.css', rel: 'stylesheet'})
);

answered Apr 29, 2011 at 14:33

Matt Ball

361k102 gold badges655 silver badges725 bronze badges

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

Comments

BrunoLM · Accepted Answer · 2011-04-29 14:35:17Z

1

You can append a CSS on head.

$("<link />").attr({ "href": "link",
    "rel": "stylesheet",
    "type": "text/css" })
    .appendTo("head");

Or make a request and create a style tag.

$.get("/static/default.css", function(d)
{
    $("<style />").html(d).appendTo("head");
})

As for appending html you can make a $.get and append or use an iframe.

answered Apr 29, 2011 at 14:35

BrunoLM

101k86 gold badges311 silver badges464 bronze badges

Collectives™ on Stack Overflow

Inject HTML and CSS using jquery but have the CSS in a separate file?

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related