Add code before the </head> and after the <body>

Asked

Viewed 264 times

1

I need a cogido javascript that adds this code before closing the tag </head>

<link rel="stylesheet" type="text/css" href="http://cdn.grupospotlight.com/nav/navbar.css">

And this one right after the tag <body>

    <ul class="spot-nav">
        <li class="left spot-logo">
          <a class="spot-a"><div class="spot-logo"/></a>
        </li>
        <li class="right">
            <a class="spot-a" href="http://www.grupospotlight.com/" target="_blank">WWW.GRUPOSPOTLIGHT.COM</a>
        </li>
    </ul>
javascript

  • What is the need to add with a Javascript and not directly in the file? It will be loaded dynamically after a user action?

  • ⇨ http://answall.com/questions/97176/como-carregar-javascript-corretamente-de-forma-din%C3%A2mica

  • http://answall.com/questions/114647/load-javascript-de-uma-url-atrav%C3%A9s-da-barra-endere%C3%A7os-ou-bookmarklet

2 answers

2


Can use document.createElement with appendChild and insertBefore, to insert do this can do so:

//Esta função é mais rapida que usar window.onload
function readyDom(callback) {
    if (/^(interactive|complete)$/i.test(document.readyState)) {
        callback();
    } else {
        document.addEventListener("DOMContentLoaded", callback);
    }
}

//vai inserir dentro do head antes do </head>
readyDom(function() {
    var navbar = document.createElement("link");

    navbar.rel  = "stylesheet";
    navbar.type = "text/css";
    navbar.href = "http://cdn.grupospotlight.com/nav/navbar.css";

    document.head.appendChild(navbar);
});

//vai no <body>, antes de qualquer elemento
readyDom(function() {
    var ulnav = document.createElement("ul");

    ulnav.className = "spot-nav";

    ulnav.innerHTML = '<li class="left spot-logo">' +
                      '<a class="spot-a"><div class="spot-logo"></div></a>' +
                      '</li>' +
                      '<li class="right">' +
                      '<a class="spot-a" href="http://www.grupospotlight.com/" target="_blank">WWW.GRUPOSPOTLIGHT.COM</a>' +
                      '</li>';

    document.body.insertBefore(ulnav, document.body.firstChild);
});

If you need a delay use setTimeout:

//vai no <body>, antes de qualquer elemento
readyDom(function() {
    var segundos = 3; //3 segundos

    setTimeout(function() {
        var ulnav = document.createElement("ul");

        ulnav.className = "spot-nav";

        ulnav.innerHTML = '<li class="left spot-logo">' +
                          '<a class="spot-a"><div class="spot-logo"></div></a>' +
                          '</li>' +
                          '<li class="right">' +
                          '<a class="spot-a" href="http://www.grupospotlight.com/" target="_blank">WWW.GRUPOSPOTLIGHT.COM</a>' +
                          '</li>';

        document.body.insertBefore(ulnav, document.body.firstChild);
    }, 1000 * segundos);
});

I recommend you study on DOM:

  • Just one detail, the link with http:// is understood as comment by javascript, maybe it is better to use simple quotes?

  • @Gabrielranéabarbosa thank you, it was typo same.

  • You have to make the code that comes after <body> load 3 seconds after the code that comes before </head>?

  • @Nano_off can be used setTimeout, I edited the answer and left an example.

1

Using jQuery is much simpler.

Could use the function .append(), to insert into "head", thus:

$("head").append("<link rel='stylesheet' type='text/css' href='http://cdn.grupospotlight.com/nav/navbar.css'>");

And the function .prepend() to insert right after the body tag, like this:

$("body").prepend("<ul class='spot-nav'> <li class='left spot-logo'><a class='spot-a'><div class='spot-logo'/></a></li><li class='right'><a class='spot-a' href='http://www.grupospotlight.com/'' target='_blank'>WWW.GRUPOSPOTLIGHT.COM</a></li></ul>");
  • 3

    A good example of use if one already uses jQuery, but importing an entire library to only insert two DOM elements seems wasteful.

Browser other questions tagged javascript

You are not signed in. Login or sign up in order to post.