Replace only where changed with jquery

Question

I am in a situation where I need to replace the contents of a <head> element, without replacing the content with what's already there.

My <head> contains the CSS links, the Meta and the title. These are updated from an ajax call, containing the html, which javascript then replaces it with.

My issue is that I get a FOUC because it is also replacing the already loaded CSS, with that CSS. Is there anyway to have it NOT replace the CSS because it's already there?

My code:

var headHTML; // This gets updated on the ajax call
$('head').html(headHTML);

This seems like a horrible idea, and if you have to replace everything in the head section, you probably failed horribly at something else! — adeneo, Feb 23 '16 at 02:57
Well then you should give me a suggestion on a better approach then. I still need to modify the meta and title with the ajax calls. — Sebastian Olsen, Feb 23 '16 at 02:58
Why? Anyway, `document.title = 'something else'` is the way to go — adeneo, Feb 23 '16 at 03:00
`document.querySelector('meta[name=keywords]')` <- this is just basic stuff ? — adeneo, Feb 23 '16 at 03:03

Louie Almeda · Accepted Answer · 2016-02-23T03:19:06.477

4

While I agree with the comments, and think that there is a better way to do this. here's something you can do to make it work.

Elements inside the <head> can also be selected using jquery. So you can individually change the title and meta like

$('head title').html('your text here');
$('head meta').attr('set it here');

edited Feb 23 '16 at 03:19

answered Feb 23 '16 at 03:03

Louie Almeda

5,366
30
38

Replace only where changed with jquery

1 Answers1