CODEWITHSUNDEEP
javascriptjqueryhtmlcss
Charas
Charas

Reputation: 1837

Replacing content of html head with jquery and change icon

So I have a function that replaces the content of the html page with another page, but then my icon is not showing, title is showing though, here is my js script.

$(document).ready(function() {
    $('.button').click(function() {
        $('html').html('<head><title>MyTitle</title><link rel="icon" href="/directory/to/my/icon.ico"></link></head><body>MyContent</body>');
    });
});

I feel like I am doing nothing wrong, I have included head and close head tag, body and close body tag, and image link correctly too, tested the same link as an image in my body and it does show my icon. I am wondering why does my icon in the tab bar not showing. Thank you in advance.

Upvotes: 0

Views: 2259

Answers (2)

entis
entis

Reputation: 309

For some reason replacing whole content of <html> element messes up the DOM. If you run your code in real html page and check Developer tools, you'll see that the title, link and text node are directly in html tag without head and body. Since the link is not officialy in head element, the browser doesn't use it. My guess is that head and body are handled differently from other tags.

Anyway, if you change your code to two separate .html() calls, it should work:

$(document).ready(function() {
    $('.button').click(function() {
        $('head').html('<title>MyTitle</title><link rel="icon" href="/directory/to/my/icon.ico"></link>');
        $('body').html('MyContent');
    });
});

Upvotes: 1

A Paul
A Paul

Reputation: 8261

what I will suggest is

$(document).ready(function() {
    $('.button').click(function() {
        $('html').html('<head><title>MyTitle</title><link rel="icon" id="favicon"></link></head><body>MyContent</body>');
        $("#favicon").attr("href","/directory/to/my/icon.ico");
    });
});

Try this.. have not tried it.. but logically should work

Upvotes: 0

Related Questions