Add code before / head and after body

Question

Add code before / head and after body

Navigation

#1 by (2 votes)
#2 by (1 votes)

1

I need a fuzzy 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 soon 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

asked by anonymous 04.12.2016 / 19:34

2 answers

1

Using jQuery is much simpler.

You could use the .append () function to insert into the head, like this:

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

And the .prepend () function 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>");

04.12.2016 / 20:23

SQL conversion to LINQ C # Select in two tables with data from the first table?

score 2 · Accepted Answer

You can use document.createElement with appendChild and insertBefore , to insert do this you can do this:

//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:

link